[Resolved] Right-arrowhead is wrapping on long menu items

[Jim]

See the longer menu items, causing the > to wrap. Is there a length limit on text, or should it be making more space?

[Leo]

Hi there,

Try one of the solutions here:
https://docs.generatepress.com/article/menu-item-height-width/#sub-menu-item-width

If this doesn’t work then please link us to the page in question 🙂

[Jim]

Thank you. Using

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

actually makes it look a bit worse. I actually prefer the text itself to wrap as before. Now it doesn’t, and the right edge of the menu background box is right at the edge of the last letter, and the arrow is still wrapping on longer items. I’d like to just prevent the arrow from dangling on a new line by itself, like a non-breaking space between it and the text.

https://forestpathology.org

[David]

Hi there,

keep what CSS you have so far and add this:

.main-navigation .main-nav ul li.menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
}
nav ul ul .menu-item-has-children {
    float: none;
}

It should force the submenu to the width of the menu item and keep the toggle icon inline

[Jim]

Wow David, you are a CSS-fu master! I’ll spend half the day figuring out how that works.

It no longer allows the text to wrap, but I’m okay with that. It’s a small price to pay to fix the rest of it. I should probably try for shorter menu text anyway.

I notice that the spacing after a menu item now depends on whether it has a submenu. For example, the space after “Decline diseases” is less than space after the rest that have submenus. Is that to be expected?

[Ying]

Hi Jim,

You have this CSS which causes the uneven padding.

.menu-item-has-children ul .dropdown-menu-toggle {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -10px;
}

As you have cache plugin on, I can’t tell where the CSS is from.

Maybe check your custom CSS first?

Let me know!

[Jim]

Funny, according to my dev tools, Ying, the CSS you quoted is coming from:
wp-content/themes/generatepress/assets/css/main.min.css?ver=3.1.3

I temporarily disabled page caching for the site, although the front page wasn’t cached anyway. I also disabled CSS concatenation/minification, which was probably preventing you seeing what was going on.

[Ying]

The CSS does come from GP 🙂

After adding David’s CSS, the structure changed, so the CSS adds extra bottom padding to menu item which has the arrow.

Try add this CSS to remove the extra bottom padding:

.menu-item-has-children ul .dropdown-menu-toggle {
    margin-bottom: -10px;
}

[Jim]

That did the trick all right!

I wonder if you guys would want this to be the stock styling of the menus. It seems to be an improvement (with my limited understanding).

Thanks for all your help! You guys are brilliant at this stuff.

[Ying]

Thanks Jim 🙂

[Author]

Posts