From c3c4831e7feced95679c778e830a2291ae472642 Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Fri, 22 Jan 2021 23:38:24 +0200 Subject: Adapting the main menu for mobile devices --- sass/header.sass | 41 ++++++++++++++++++++--------- sass/settings.sass | 8 ++---- site/css/main.css | 76 +++++++++++++++++++++++++++++++++++++++++++----------- 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 { -- cgit v1.2.3