[Resolved] Sub-Menu Item Width

[Erik]

Is it possible to give the Sub-Menu Item the same width as the Menu Item?

[Leo]

Hi Erik,

This should help: https://generatepress.com/forums/topic/submenu-width/#post-66530

Let me know.

[Leo]

For it to inherit the parent item width, you would do this:

.main-navigation ul ul {
    width: 100%;
}

[Erik]

Thanks, that’s the solution.

[Leo]

Glad we could help!

[Mihail]

Hello. Using this code:

.main-navigation ul ul {
    width: 100%;
}

I managed to make the menu items wide. That’s cool:
https://prnt.sc/1c4u8zu

But there’s a problem. Now the arrow is not displayed correctly:
https://prnt.sc/1c4uh4j
https://prnt.sc/1c4ulrn

Can this be fixed?

Thx for answer 😉

[David]

Hi there,

The half way solution is to give them a minimum width:

.main-navigation ul ul {
    width: 100%;
    min-width: 260px;
}

Adjust the min-width to suit. It does mean that some sub menus will be wider though.

Alternatively try reducing the font size of the sub menu and its right hand padding:

.main-navigation .main-nav ul ul li a {
    font-size: 13px;
    padding-right: 5px;
}

[Author]

Posts