File: /var/www/shoetique/wp-content/themes/north-wp/assets/sass/_mobilemenu.scss
/* Sidr */
#mobile-menu {
position: fixed;
top: 0;
height: 100%;
z-index: 99;
padding: 0;
width: 320px;
background: #fff;
overflow: hidden;
left:0;
@include translate3d(-320px, 0, 0);
.no-csstransforms3d & {
left: -320px;
}
.touch & {
overflow-x: hidden !important;
overflow-y: scroll !important;
-ms-overflow-style: -ms-autohiding-scrollbar !important;
-webkit-overflow-scrolling: touch !important;
}
@extend .transition;
@media only screen and (max-width: $break-small) {
width: 280px;
left: 0;
@include translate3d(-280px, 0, 0);
.no-csstransforms3d & {
left: -280px;
}
}
.open-menu &{
visibility: visible;
@include translate3d(0, 0, 0);
.no-csstransforms3d & {
left: 0;
}
}
.admin-bar & {
padding-top: 46px;
@media screen and (min-width: 783px){
padding-top: 32px;
}
}
.social-links {
padding: 22px 30px 0;
a {
color: #a8aaad;
margin-right: 18px;
}
}
}
/* Mobile Menu */
.mobile-menu {
list-style: none;
margin: 0;
padding: 20px 30px;
clear: left;
border-bottom: 1px solid $color2;
background: #fff;
@include backface-visibility(hidden);
li {
span {
display: block;
position: absolute;
width: 21px;
height: 40px;
text-align: center;
line-height: 40px;
font-weight: 300;
font-size: 11px;
right: 0;
top: 0;
@extend .transition;
.rtl & {
right: auto;
left: 0;
}
}
a {
display: block;
line-height: 40px;
font-size: 22px;
font-weight: bold;
color: #595959;
position: relative;
@extend .transition;
&.active {
color: $color1;
span {
.fa:before {
content: "\f068";
}
}
}
}
}
.sub-menu {
display: none;
list-style: none;
margin: 0;
padding: 15px 0;
li {
a {
font-size: 14px;
font-weight: 600;
line-height: 30px;
border: 0;
color: #595959;
span {
height: 30px;
line-height: 30px;
}
}
}
.sub-menu {
margin: 0 0 0 15px;
li a {
font-weight: 500;
}
}
}
}
.mobile-secondary-menu {
list-style: none;
padding: 22px 30px 0 30px;
margin: 0;
a {
font-size: 14px;
font-weight: 600;
color: #595959;
text-transform: uppercase;
line-height: 30px;
}
}