update on menu

dergoldbroiler · Nov 3, 2023 · f246522 · f246522
1 parent baf7481
commit f246522
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 17 deletions.
diff --git a/images/icons/aufbereitung_icon.svg b/images/icons/aufbereitung_icon.svg
diff --git a/scss/includes/_menu.scss b/scss/includes/_menu.scss
@@ -14,33 +14,93 @@
                 font-size: 17px;
                 padding:30px 45px;
                 display: block;
+
+                &:before{
+                    background-repeat: no-repeat;
+                    width: 26px;
+                    height: 26px;
+                    /* vertical-align: sub; */
+                    margin-right: 10px;
+                    line-height: 26px;
+                    vertical-align: middle;
+                    position: relative;
+                    top: 3px;   
+                    content:' ';
+                    display: inline-block;
+                }
             }
 
             &.car {
                 a{
                     &:before{
-                        content:' ';
-                        display: inline-block;
                         background-image: url('../images/icons/fahrzeuge_icon.svg');
-                        background-size: 25.8px 14.9px;
-                        background-repeat: no-repeat;
-                        width: 26px;
-                        height: 26px;
-                        /* vertical-align: sub; */
-                        margin-right: 10px;
-                        line-height: 26px;
-                        vertical-align: middle;
-                        position: relative;
-                        top: 3px;                    
+                        background-size: 25.8px 14.9px;               
+                    }
+                }
+            }
+            &.service {
+                a{
+                    &:before{
+                        background-image: url('../images/icons/Service_icon.svg');
+                        background-size: 25.8px 14.9px;               
+                    }
+                }
+            }
+            &.felge {
+                a{
+                    &:before{
+                        background-image: url('../images/icons/felge.svg');
+                        background-size: 25.8px 14.9px;               
                     }
                 }
             }
 
+            &.beschichtung {
+                a{
+                    &:before{
+                        background-image: url('../images/icons/fahrzeuge_icon.svg');
+                        background-size: 25.8px 14.9px;               
+                    }
+                }
+            }
+            &.aufbereitung {
+                a{
+                    &:before{
+                        background-image: url('../images/icons/aufbereitung_icon.svg');
+                        background-size: 25.8px 14.9px;               
+                    }
+                }
+            }
+            &.kontakt {
+                a{
+                    &:before{
+                        background-image: url('../images/icons/Kontakt_icon.svg');
+                        background-size: 25.8px 14.9px;               
+                    }
+                }
+            }
+
+
             &.orange {
                 a{
                     border-bottom:8px solid $orange;
                 }
             }
+            &.green {
+                a{
+                    border-bottom:8px solid $green;
+                }
+            }
+            &.red {
+                a{
+                    border-bottom:8px solid $red;
+                }
+            }
+            &.blue {
+                a{
+                    border-bottom:8px solid $blue;
+                }
+            }
 
 
         }

diff --git a/scss/styles.css b/scss/styles.css
@@ -85,11 +85,7 @@ body header .contact .clock:before {
   padding: 30px 45px;
   display: block;
 }
-#menucontainer ul li.car a:before {
-  content: " ";
-  display: inline-block;
-  background-image: url("../images/icons/fahrzeuge_icon.svg");
-  background-size: 25.8px 14.9px;
+#menucontainer ul li a:before {
   background-repeat: no-repeat;
   width: 26px;
   height: 26px;
@@ -99,7 +95,42 @@ body header .contact .clock:before {
   vertical-align: middle;
   position: relative;
   top: 3px;
+  content: " ";
+  display: inline-block;
+}
+#menucontainer ul li.car a:before {
+  background-image: url("../images/icons/fahrzeuge_icon.svg");
+  background-size: 25.8px 14.9px;
+}
+#menucontainer ul li.service a:before {
+  background-image: url("../images/icons/Service_icon.svg");
+  background-size: 25.8px 14.9px;
+}
+#menucontainer ul li.felge a:before {
+  background-image: url("../images/icons/felge.svg");
+  background-size: 25.8px 14.9px;
+}
+#menucontainer ul li.beschichtung a:before {
+  background-image: url("../images/icons/fahrzeuge_icon.svg");
+  background-size: 25.8px 14.9px;
+}
+#menucontainer ul li.aufbereitung a:before {
+  background-image: url("../images/icons/aufbereitung_icon.svg");
+  background-size: 25.8px 14.9px;
+}
+#menucontainer ul li.kontakt a:before {
+  background-image: url("../images/icons/Kontakt_icon.svg");
+  background-size: 25.8px 14.9px;
 }
 #menucontainer ul li.orange a {
   border-bottom: 8px solid #e8a422;
+}
+#menucontainer ul li.green a {
+  border-bottom: 8px solid #89b459;
+}
+#menucontainer ul li.red a {
+  border-bottom: 8px solid #ea612e;
+}
+#menucontainer ul li.blue a {
+  border-bottom: 8px solid #245861;
 }