[Support request] CSS to set the width of dropdown menus to fit the widest menu item not working

[Andrew]

Hello,

I’m trying to set the width of dropdown menus to fit the widest menu item (desktop only).

I tried using this CSS but it’s not working. I’m not sure if I have other CSS that might be conflicting with it.

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

[David]

Hi there,

try giving it some importance:

@media(min-width: 1025px) {
    .main-navigation ul ul {
        width: auto !important;
        white-space: nowrap;
    }
}

And the media query is to stop it. messing up on mobile

[Andrew]

Hi David – Thank you. That worked but I noticed on tablet the drop-down menu is now shifted to the left when I click on the menu items.

[David]

Aah ok – I updated my CSS above

https://generatepress.com/forums/topic/css-to-set-the-width-of-dropdown-menus-to-fit-the-widest-menu-item-not-working/#post-2143561

[Andrew]

Perfect, thank you!!

[David]

You’re welcome

[Author]

Posts