Adapting the main menu for mobile devices

1 files changed, 61 insertions, 15 deletions

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 {