Adapting the main menu for mobile devices

3 files changed, 92 insertions, 33 deletions

diff --git a/sass/header.sass b/sass/header.sass
index 6e2c081..27c5efa 100644
--- a/sass/header.sass
+++ b/sass/header.sass
@@ -12,6 +12,8 @@ header
     z-index: 2

   +resp(esm)

     padding: 10px 0

+  +resp(xsm)

+    padding: 5px 0

 

   div.header__inner

     display: flex

@@ -27,39 +29,54 @@ header
         margin-right: 30px

         +resp(lg)

           margin-right: 16px

+        +resp(md)

+          margin-right: 10px

       div.header__text

         font-weight: 500

-        font-size: 16px

         line-height: 25px

         +resp(sm)

           display: none

         p

           font-size: 16px

           color: #ACACAD

-          text-align: left

           +resp(md)

+            font-size: 15px

+          +resp(sm)

             display: none

 

     div.header__links-side

-      display: grid

-      grid-template-columns: 1fr auto auto auto

-      grid-gap: 31px

-      justify-items: center

+      display: flex

       align-items: center

-      +resp(lg)

-        grid-gap: 20px

-        text-align: center

-      +resp(sm)

-        display: none

+      +resp(xsm)

+        flex-wrap: wrap

+        justify-content: flex-end

       a

         font-weight: 600

         font-size: 15px

-        line-height: 14px

+        line-height: 140%

         text-transform: uppercase

         text-decoration: none

         color: $black

         transition: 0.3s

+        margin-left: 31px

+        text-align: center

         +resp(lg)

           font-size: 14px

+          margin-left: 20px

+        +resp(esm)

+          margin-left: 14px

+        +resp(usm)

+          font-size: 13px

+        +resp(xsm)

+          line-height: 180%

+          font-size: 14px

+          margin-left: 24px

+        &:nth-child(1)

+          margin-left: 0

+        &:nth-child(3)

+          +resp(usm)

+            max-width: 100px

+          +resp(xsm)

+            max-width: 100%

         &:hover

           color: $orange
\ No newline at end of file
diff --git a/sass/settings.sass b/sass/settings.sass
index 6cca3d9..01b3d95 100644
--- a/sass/settings.sass
+++ b/sass/settings.sass
@@ -35,11 +35,7 @@ $dark-orange: #FD8F01
 	@if $media == usm

 		@media only screen and (max-width: 450px)

 			@content

-	// 390px and down

+	// 375px and down

 	@if $media == xsm

-		@media only screen and (max-width: 390px)

-			@content

-	// 350px and down

-	@if $media == exsm

-		@media only screen and (max-width: 350px)

+		@media only screen and (max-width: 375px)

 			@content
\ No newline at end of file
diff --git a/site/css/main.css b/site/css/main.css
index f1b0441..f1484a1 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -178,6 +178,11 @@ header {
     padding: 10px 0;
   }
 }
+@media only screen and (max-width: 375px) {
+  header {
+    padding: 5px 0;
+  }
+}
 header div.header__inner {
   display: -webkit-box;
   display: -webkit-flex;
@@ -215,9 +220,13 @@ header div.header__inner div.header__logo-side a.header__logo {
     margin-right: 16px;
   }
 }
+@media only screen and (max-width: 991px) {
+  header div.header__inner div.header__logo-side a.header__logo {
+    margin-right: 10px;
+  }
+}
 header div.header__inner div.header__logo-side div.header__text {
   font-weight: 500;
-  font-size: 16px;
   line-height: 25px;
 }
 @media only screen and (max-width: 767px) {
@@ -228,48 +237,85 @@ header div.header__inner div.header__logo-side div.header__text {
 header div.header__inner div.header__logo-side div.header__text p {
   font-size: 16px;
   color: #ACACAD;
-  text-align: left;
 }
 @media only screen and (max-width: 991px) {
   header div.header__inner div.header__logo-side div.header__text p {
+    font-size: 15px;
+  }
+}
+@media only screen and (max-width: 767px) {
+  header div.header__inner div.header__logo-side div.header__text p {
     display: none;
   }
 }
 header div.header__inner div.header__links-side {
-  display: grid;
-  grid-template-columns: 1fr auto auto auto;
-  grid-gap: 31px;
-  justify-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
 }
-@media only screen and (max-width: 1199px) {
-  header div.header__inner div.header__links-side {
-    grid-gap: 20px;
-    text-align: center;
-  }
-}
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 375px) {
   header div.header__inner div.header__links-side {
-    display: none;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
   }
 }
 header div.header__inner div.header__links-side a {
   font-weight: 600;
   font-size: 15px;
-  line-height: 14px;
+  line-height: 140%;
   text-transform: uppercase;
   text-decoration: none;
   color: #18191C;
   -webkit-transition: 0.3s;
   -o-transition: 0.3s;
   transition: 0.3s;
+  margin-left: 31px;
+  text-align: center;
 }
 @media only screen and (max-width: 1199px) {
   header div.header__inner div.header__links-side a {
     font-size: 14px;
+    margin-left: 20px;
+  }
+}
+@media only screen and (max-width: 575px) {
+  header div.header__inner div.header__links-side a {
+    margin-left: 14px;
+  }
+}
+@media only screen and (max-width: 450px) {
+  header div.header__inner div.header__links-side a {
+    font-size: 13px;
+  }
+}
+@media only screen and (max-width: 375px) {
+  header div.header__inner div.header__links-side a {
+    line-height: 180%;
+    font-size: 14px;
+    margin-left: 24px;
+  }
+}
+header div.header__inner div.header__links-side a:nth-child(1) {
+  margin-left: 0;
+}
+@media only screen and (max-width: 450px) {
+  header div.header__inner div.header__links-side a:nth-child(3) {
+    max-width: 100px;
+  }
+}
+@media only screen and (max-width: 375px) {
+  header div.header__inner div.header__links-side a:nth-child(3) {
+    max-width: 100%;
   }
 }
 header div.header__inner div.header__links-side a:hover {