started with mobile header

dergoldbroiler · Nov 5, 2023 · e23af69 · e23af69
1 parent 3de2d93
commit e23af69
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 2 deletions.
diff --git a/scss/includes/_main.scss b/scss/includes/_main.scss
@@ -29,8 +29,25 @@ body {
     }
 
     header {
+
+        #header-inner-container{
+            @media (max-width: 1200px) {
+              background-color: $darkblue;
+              max-width: 100%;
+            }
+        }
+
+        .mobile{
+            display: none;
+            @media (max-width: 1200px) {
+                display: block !important;
+             }
+        }
 
         .contact {
+            @media (max-width: 1200px) {
+               display: none !important;
+            }
 
             .whatsapp{
                 padding-left:20px;

diff --git a/scss/includes/_menu.scss b/scss/includes/_menu.scss
@@ -1,11 +1,14 @@
 #menucontainer {
-    background-color: #03223e; 
+    background-color: $darkblue;
     min-height: 50px;
 
     ul {
         display: flex;
         list-style: none;
         padding: 0;
+        @media (max-width: 1200px) {
+            display: none;
+         }
         li {
             padding:0;
 

diff --git a/scss/includes/_variables.scss b/scss/includes/_variables.scss
@@ -4,4 +4,5 @@ $orange:#e8a422;
 $green:#89b459;
 $red:#ea612e;
 $blue:#245861;
-$lightgrey:#f7f8f8;
+$lightgrey:#f7f8f8;
+$darkblue:#03223e;
diff --git a/scss/styles.css b/scss/styles.css
@@ -38,6 +38,25 @@ body a {
 body a:hover {
   text-decoration: underline;
 }
+@media (max-width: 1200px) {
+  body header #header-inner-container {
+    background-color: #03223e;
+    max-width: 100%;
+  }
+}
+body header .mobile {
+  display: none;
+}
+@media (max-width: 1200px) {
+  body header .mobile {
+    display: block !important;
+  }
+}
+@media (max-width: 1200px) {
+  body header .contact {
+    display: none !important;
+  }
+}
 body header .contact .whatsapp {
   padding-left: 20px;
 }
@@ -76,6 +95,11 @@ body header .contact .clock:before {
   list-style: none;
   padding: 0;
 }
+@media (max-width: 1200px) {
+  #menucontainer ul {
+    display: none;
+  }
+}
 #menucontainer ul li {
   padding: 0;
 }