%PDF-
%PDF-
Mini Shell
Mini Shell
.header {
background-color: $white;
&-logo {
display: flex;
align-items: center;
&_mob {
display: none;
}
}
&-body {
padding: 30px 0;
align-items: center;
display: flex;
}
&-menu {
display: flex;
li {
margin-right: 20px;
margin-left: 20px;
&.current-menu-item{
&>a{
&::after {
width: 100%;
}
}
}
a {
position: relative;
padding: 8px 0;
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
display: inline-block;
width: 0;
height: 2px;
transition: 0.3s ease-in-out;
background-color: $black;
}
&:hover {
&::after {
width: 100%;
}
}
}
}
.with-ul,
.menu-item-has-children {
position: relative;
&:hover {
&:after {
border-right: 1px solid $black;
border-bottom: 1px solid $black;
}
& > .sub-menu {
display: block;
}
}
.sub-menu {
position: absolute;
white-space: nowrap;
display: none;
list-style: none;
max-width: 400px;
min-width: 150px;
top: 100%;
z-index: 99;
margin: 0;
background: #fff;
box-shadow: 0 1px 8.82px 0.18px hsla(217, 9%, 51%, 0.65);
li {
margin: 0;
border-bottom: 1px solid #3333;
&:last-child {
border-bottom: none;
margin-bottom: 0;
}
}
a {
font-size: 14px;
padding: 10px 20px;
text-transform: none;
display: block;
width: 100%;
white-space: normal;
line-height: 1.4;
white-space: nowrap;
&:hover {
&:after {
color: $black;
display: none;
}
}
}
}
}
&__wrapp {
margin-left: auto;
display: flex;
}
}
.sign-up {
margin-left: 80px;
}
.cart {
margin-left: 90px;
}
.menu-arrow {
position: absolute;
bottom: 10px;
right: -15px;
display: block;
width: 8px;
height: 8px;
transform: rotate(-45deg);
border-bottom: 2px solid #000;
border-left: 2px solid #000;
}
}
//Burger
.header-burger {
width: 30px;
height: 23px;
position: relative;
transform: rotate(0deg);
transition: 0.5s ease-in-out;
cursor: pointer;
z-index: 1000;
display: none;
span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: $gray;
opacity: 1;
left: 0;
transition: 0.25s ease-in-out;
border-radius: 3px;
&:nth-child(1) {
top: 0;
}
&:nth-child(2) {
top: 10px;
left: 0;
max-width: 100%;
}
&:nth-child(3) {
bottom: 0;
max-width: 100%;
}
}
&.active {
span:nth-child(1) {
top: 9px;
transform: rotate(135deg);
}
span:nth-child(2) {
opacity: 0;
right: -60px;
}
span:nth-child(3) {
top: 9px;
transform: rotate(-135deg);
}
}
}
@media (max-width: 990px) {
.header {
position: relative;
&-burger__wrapper {
display: block;
margin-left: auto;
z-index: 1002;
}
// &-logo {
// display: none;
// &_mob {
// display: flex;
// align-items: center;
// }
// }
&-body {
padding: 20px 0;
justify-content: space-between;
}
&-menu__wrapp {
display: block;
position: absolute;
background: $white;
left: -1000px;
right: 0;
top: 100%;
padding: 60px 20px;
padding-bottom: 120px;
height: 100vh;
transition: all 0.4s ease-in-out;
opacity: 0;
visibility: hidden;
z-index: 900;
overflow: auto;
&.active {
transition: all 0.4s ease;
opacity: 1;
left: 0;
visibility: visible;
}
}
&-menu {
display: block;
max-width: 690px;
margin: auto;
li {
margin: 0;
width: 100%;
}
li a {
display: block;
margin-right: 40px;
padding: 10px 0px;
font-size: 18px;
line-height: 140%;
text-transform: uppercase;
font-weight: 700;
&::after {
display: none;
}
}
}
.sign-up {
margin: auto;
margin-top: 40px;
}
.cart {
margin-left: 0;
}
.menu-arrow {
top: 6px;
right: 10px;
width: 15px;
height: 15px;
z-index: 10;
&.active{
bottom: 10px;
transform: rotate(135deg);
&+.sub-menu{
display: block!important;
margin-bottom: 15px;
}
}
}
}
.header-burger {
display: block;
}
.header-menu .with-ul .sub-menu,
.header-menu .menu-item-has-children .sub-menu {
position: static;
box-shadow: none;
}
.header-menu .with-ul:hover > .sub-menu, .header-menu .menu-item-has-children:hover > .sub-menu {
display: none;
}
}
@media (max-width: 767px) {
.header {
}
}
Zerion Mini Shell 1.0