Archived topic
Mobile menu slideout not showing menu
5 replies · Started by Raquel on July 30, 2018
Hello! I have a problem with the mobile menu, when I actived the slideout option for mobile the menu do not show. Just if I turn off the slideout navigation.
Hi there,
Any chance you can link me to the page so I can see the issue?
Thanks!
Hi Tom, thanks for your answer.
I did the following steps to get it:
1) Menu/ view all locations/Slideout navigation/ [Main Menu] I selected the menu
2) Layout / slideout navigation/ Mobile only
3) Aditional css
/* Mobile Menu layout */
nav.slideout-navigation {
background-color:rgba(0, 0, 0, 0.8);
width: 65%;
padding-top: 50px;
}
.slideout-navigation.main-navigation .main-nav ul li a {
text-align: left;
}
#generate-slideout-menu {
border-top-right-radius: 12px;
}
Now I have a problem... the slideout appears open on the desktop. I dont know why! this is my site
It's appearing on desktop as you gave it a width of 65%: width: 65%;
To make it 65%, try this:
.offside {
width: 65%;
}
.offside,
.offside--left {
left: -65%;
}
.offside--left.is-open,
.offside-js--is-left .offside-sliding-element {
-webkit-transform: translate3d(100%,0,0);
-moz-transform: translate3d(100%,0,0);
-ms-transform: translate3d(100%,0,0);
-o-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
left: 65%;
}
oh I really aprecciate your help, thnk u.
it works!
You're welcome :)