Submenu auto width

Hi there,

I don't think that's possible without some custom coding as it would need to go through all submenu items under each parent menu items to figure out which is the longest, set a width, then apply it to the rest of the submenu items.

I believe that requires more than CSS.

Will ask Tom to confirm :)

You could try something like this:

.sub-menu .dropdown-menu-toggle {
    position: absolute;
    right: 0;
}

.main-navigation ul ul {
    width: auto;
    white-space: nowrap;
}

Works perfect :)

Thank you Tom!

You're welcome :)

Hi

I am trying to increase the width of my main menu's drop down (2 tiers) menu.

I tried the above code and it did not work.

Can you assist?

Thanks,
Colin

Hi there,

Try this: https://docs.generatepress.com/article/menu-item-height-width/#sub-menu-item-width

Let me know.

I know this is an old one but when having a second level submenu, Tom's and and Leo's solution doesn't work. When having a second level sub-menu, cascading sub-menu arrows appear behind the submenu text thus breaking the layout.

Is there a fix for this?

Oh well, adding .sub-menu li { margin-right: 2em; } seemed to work!

.sub-menu .dropdown-menu-toggle {
    position: relative;
    right: 0;
}

.sub-menu li {
    margin-right: 2em;
}

.main-navigation ul ul {
    width: auto;
    white-space: nowrap;
}

Maybe you could check my solution and update the article above in case some users with more than 2 sub-menu levels find it useful.

That CSS looks ok.

Any chance you can link me to the page in question without the additional CSS added so I can see the original issue?

Ehm, I am working locally from work now. Just fireup a clean WP install with GP free + premium and add a bunch of menus with a lost of submenu levels. Add 3 or 4, You will see the issue immediately.

This is how it is without the added code:
https://imgur.com/UeALeJm

And this is how it is with the code included:
https://imgur.com/50R7owp

ok your code looks good to me.

We will take a closer look and update the docs page later.

Thanks :)

Yeah, sounds good, thanks for taking a look, Leo!

No problem :)

Thanks for bringing it up!