Archived topic
Increase the width of the menu items in slide out menu
3 replies · Started by Ian on January 10, 2019
The menu items in the slide out menu are not wide enough. I would also like to give the menu items some top and left margin for left slide out.
Hi there,
You could try something like this:
.offside--left.is-open {
-webkit-transform: translate3d(350px,0,0);
-moz-transform: translate3d(350px,0,0);
-ms-transform: translate3d(350px,0,0);
-o-transform: translate3d(350px,0,0);
transform: translate3d(350px,0,0);
}
.main-navigation.offside {
width: 350px;
}
.main-navigation.offside.is-open {
margin: 50px 40px;
}
.offside, .offside--left {
left: -350px;
}
.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
left: 40px;
top: 0;
}
Let me know :)
Thanks Tom, perfect. One little thing, no big deal but if I want to change the colour and transparency of that slide out background what would I add?
Hi there,
you can change the slideout navigation colors in the customizer, to change the overlay then this CSS:
.slideout-overlay {
background-color: rgba(0,0,0,0.5);
}