[Resolved] Mobile menu slideout not showing menu

[Raquel]

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.

[Tom]

Hi there,

Any chance you can link me to the page so I can see the issue?

Thanks!

[Raquel]

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

[Tom]

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%;
}

[Raquel]

oh I really aprecciate your help, thnk u.
it works!

[Tom]

You’re welcome 🙂

[Author]

Posts