assets/css/scss/layout/_nav.scss
@include media("<desktop-wide") {
#masthead {
.wrapper-toggle {
align-items: center;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin-left: -15px;
margin-right: -15px;
order: 2;
width: calc(100% + 30px);
&.open {
.mobile-menu-title {
&:after {
content: $fa-var-times;
}
}
}
.mobile-menu-title {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1;
text-transform: uppercase;
text-align: right;
&:after {
@include fa-icon();
content: $fa-var-angle-down;
margin-left: 5px;
text-align: center;
width: 16px;
}
}
.navbar-toggle {
border: 0 none;
border-radius: 0;
margin: 0;
padding: 10px 15px;
& > .icon-bar {
border-radius: 0;
width: 30px;
& + .icon-bar {
margin-top: 5px;
}
}
}
}
.primary-navbar {
border: 0 none;
box-shadow: none;
margin-left: -15px;
margin-right: -15px;
order: 3;
width: calc(100% + 30px);
z-index: 1000;
& > .nav {
margin-bottom: 0;
margin-top: 0;
padding: 5px 20px 10px;
.caret {
display: none;
}
& > .menu-item + .menu-item {
& > a {
&:before {
background-color: #979797;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 0;
}
}
}
}
.menu-item {
&.active > a,
& > a {
font-size: 16px;
padding: 10px 0;
}
&.dropdown > a {
position: relative;
&:after {
@include fa-icon();
content: $fa-var-angle-down;
margin-left: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
&.lsx-wc-my-account-menu-item {
&.dropdown > a {
&:after {
margin-left: 20px;
}
span {
&:after {
@include fa-icon();
content: $fa-var-user;
margin-left: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
}
}
&.lsx-wc-cart-menu-item {
&.dropdown > a {
&:after {
margin-left: 25px;
}
span:nth-child(2) {
&:after {
@include fa-icon();
content: $fa-var-shopping-basket;
margin-left: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
}
}
}
.dropdown-menu {
border-radius: 0;
padding: 0;
& > .menu-item a {
padding-left: 15px;
}
& > .menu-item.open > a {
&:before {
background-color: #979797;
bottom: 0;
content: "";
height: 1px;
left: 15px;
position: absolute;
right: 0;
}
}
.dropdown-menu {
& > .menu-item a {
padding-left: 30px;
}
}
}
}
}
.mobile-header-hamburger {
#masthead {
.wrapper-toggle {
.navbar-toggle {
padding-right: 0;
margin-right: -5px;
}
}
}
}
}
@include media(">=phone", "<desktop-wide") {
#masthead {
.wrapper-toggle,
.primary-navbar {
margin-left: -30px;
margin-right: -30px;
width: calc(100% + 60px);
}
}
}
@include media(">=desktop-wide") {
#masthead {
backface-visibility: hidden;
.mobile-menu-title {
display: none;
}
.primary-navbar {
align-self: stretch;
display: flex !important;
flex: 1;
flex-direction: column;
flex-grow: 1;
margin-left: 100px;
margin-right: 45px;
padding: 0;
.header-expanded &,
.header-central & {
margin-left: 0;
margin-right: 0;
min-height: 60px;
}
& > .nav {
display: flex;
flex: 1;
height: 100%;
.header-expanded &,
.header-central & {
margin: 0 -9999px;
padding: 0 9999px;
}
.header-central & {
align-content: center;
display: flex;
flex-flow: row nowrap;
float: none;
height: 60px;
justify-content: center;
left: auto;
position: static;
right: auto;
}
& > .menu-item {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
& > a,
&.active > a {
align-items: center;
display: flex;
font-size: 14px;
line-height: 14px;
padding: 0 15px;
transition: all 300ms ease;
& > .caret {
margin: 2px 0 0 5px;
}
}
}
.menu-item-has-children {
&:hover {
& > .dropdown-menu {
opacity: 1;
transform: scale(1, 1);
}
}
}
.dropdown-menu {
box-shadow: none;
border: 0 none;
border-radius: 0;
display: block;
margin: 0;
opacity: 0.3;
padding: 0;
transition: all 300ms ease;
transform: scale(1, 0);
transform-origin: top center;
& > .menu-item {
transition: all 300ms ease;
&.dropdown {
&:before {
@include fa-icon();
content: $fa-var-angle-right;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
}
& > a {
background-color: inherit;
color: inherit;
font-size: 14px;
padding: 12px 40px 12px 15px;
&:hover,
&:active:hover,
&:focus {
background-color: transparent;
}
}
.dropdown-menu {
left: 100%;
top: 0;
}
}
}
}
}
}
}
@include nav-colours();