nav responsive styling

This commit is contained in:
VividTruthKeeper 2023-02-16 14:55:12 +05:00
parent 90ec8e2314
commit d43cc28698
1 changed files with 29 additions and 23 deletions

View File

@ -162,36 +162,42 @@
// Media // Media
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
.nav-burger { // .nav-burger {
display: block; // display: block;
width: 3rem; // width: 3rem;
height: 3rem; // height: 3rem;
.line { // .line {
position: absolute; // position: absolute;
width: 100%; // width: 100%;
border-radius: 1rem; // border-radius: 1rem;
background: $black; // background: $black;
height: 0.33rem; // height: 0.33rem;
&-1 { // &-1 {
top: 15%; // top: 15%;
} // }
&-2 { // &-2 {
top: 50%; // top: 50%;
transform: translateY(-50%); // transform: translateY(-50%);
} // }
&-3 { // &-3 {
top: 75%; // top: 75%;
} // }
} // }
} // }
.nav-left, .search,
.nav-right { .nav-right {
display: none; display: none;
} }
.nav-left {
padding-right: 0;
}
.nav-inner { .nav-inner {
display: flex; display: flex;
flex-direction: row-reverse;
gap: 1.6rem; gap: 1.6rem;
justify-content: space-between; justify-content: space-between;
padding: 2.4rem 0; padding: 2.4rem 0;