Archived topic
How to chage the width of the mobile menu items?
4 replies · Started by Josef on August 12, 2021
I have some menu items with long names and in the mobile menu they collapse to two lines.
I don't see any option to change the mobile menu items width.
How could I do that?
Hi there,
you can try removing the padding for the off canvas panel with this CSS:
.nav-below-header .main-navigation.slideout-navigation .inside-navigation.grid-container {
padding: 0;
}
I've added it to Appearance / Customize / Additional CSS
But I don't see any difference.
How could I overrule this this?
If I disable this 256px in developer mode, then the menu becomes wide enough.
.main-navigation.offside {
width: 265px;
I can see that CSS working, there is no longer the padding either side of the menu items. Which freed up a lot of space.
Maybe the browser cache needs clearing?
If you want to change the offcanvas width, you would use this CSS:
#generate-slideout-menu {
left: -300px;
}
#generate-slideout-menu.offside--left.is-open {
transform: translate3d(300px,0,0);
}
.main-navigation.offside#generate-slideout-menu {
width: 300px;
}
.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
left: 290px !important;
}