Site logo

Archived topic

How to chage the width of the mobile menu items?

4 replies · Started by Josef on August 12, 2021

Viewing posts 1–5 of 5

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;
}
This archived topic is closed to new replies.