.site-header {
.header-menu {
max-width: 840px;
}
.navbar {
position: relative;
border-bottom: none;
background: inherit;
width: 100%;
transition: transform 300ms;
z-index: 999;
@include respond-above('start', 'screen') {
padding: 0;
}
.menu-item-has-children.dropdown:hover {
.dropdown-menu:first-child {
display: block !important;
}
}
.dropdown-item {
padding-left:0.5rem;
padding-right: 0.5rem;
&:hover, &:focus {
background-color: transparent;
}
}
@for $i from 8 through 12 {
li:nth-child(#{$i}) {
display: none;
}
}
ul.dropdown-menu li {
display: block !important;
}
a {
color: inherit;
font-size: 15px;
letter-spacing: 0.2px;
padding: 0;
margin-right: 24px;
white-space: nowrap;
&:hover {
color: inherit;
opacity: 0.7;
}
}
li:last-child a {
margin-right: 0;
}
.active > .nav-link {
position: relative;
padding-bottom: 8px;
bottom: -4px;
&:before {
content: "";
position: absolute;
bottom: 0;
left: 4px;
margin: auto;
width: 51px;
height: 29px;
z-index: 1;
mask-image: url("images/wave-line.svg");
mask-size: cover;
background-color: bastet-color();
}
}
.dropdown-menu {
padding: 20px;
border: none;
box-shadow: $box-shadow__main;
white-space: nowrap;
li {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&.dropdown {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
a.dropdown-item[data-toggle=dropdown] {
display: flex;
align-items: center;
justify-content: space-between;
&:after {
content: "";
display: inline-block;
margin-left: 0.455em;
vertical-align: 0.255em;
transform: rotate(-90deg);
}
}
ul.dropdown-menu {
left: calc( 100% - 2px );
margin-top: -40px;
}
&:hover {
ul.dropdown-menu {
display: block;
}
}
}
}
a {
&:hover, &:active {
background-color: transparent;
}
}
}
ul.navbar-nav {
margin-left: 0;
align-items: center;
li {
&.search-menu {
margin-left: 6px;
.search {
width: 12px;
height: 12px;
padding: 2px 2px 0px 4px;
margin: 14px 8px 7px 0px;
}
}
}
}
}
}
.dropdown-toggle::after, li a.dropdown-item::after {
width: 6px;
height: 6px;
position: relative;
top: 2px;
background-size: 6px 6px;
background-color: currentColor;
mask-image: url("images/angle-down.svg");
mask-size: cover;
border: none !important;
margin-left: 6px;
}