[Resolved] adjust line height slideout menu item

[Steven]

Hello.
I love the slide out option for the primary menu for mobile. However, if a menu item wraps to a new line there is so much space between lines it looks like the second line is a separate item. Any tips on how to close up the line spacing? My site is still in local development so I can’t share a URL but here’s a screen capture to illustrate the issue.
I don’t want to close up the spacing (reduce the height) between ALL menu items, as that would get difficult for touch interaction. I just want to tighten up the line spacing within individual items.
By the way, this overly-generous line spacing is only an issue for top level items in the slide out menu. Sub-items in the menu are perfect.
Thank you.
Steve

[Leo]

Hi Steven,

Would increasing the slideout navigation width solve (and perhaps reduce the font size a little) the issue for you?

I feel like it will look better if the menu item doesn’t break into two lines.

Let me know what’s your preferable solution 🙂

[Steven]

Thanks, Leo.
I’d rather not go that route. It might solve this specific instance but at some point down the line there might be an even longer item and I’d be back in the same predicament.

This screen capture shows what the sub-items in the slide out menu currently look like. The vertical spacing between lines of a single item are much tighter and it’s much clearer what lines belong together. This tighter spacing for the sub items is what I’d like to get closer to for the top level items.

Thanks again though.
Steve

[Leo]

Try adding a custom class to long menu items like long-item
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then use this CSS:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li.long-item a {
        line-height: normal;
    }
}

[Steven]

Well first – thanks for the link showing how to access those additional menu attribute settings. That’s going to be extremely helpful to know.

Second… I guess I could live with the solution you proposed, and only set that class on some items when they wrap to a new line, but that means that ages from now when it comes up again I’ll have to remember what I did!

I made one more illustration to try to clarify what I’m seeking to do. You can look at it here. Maybe that will be more helpful in describing my objective than words are. If it weren’t for the fact that the sub-menu items do exactly what I seek to do, I’d probably happily settle for your solution, but since I have seen what I want I’m not ready to quit trying yet!

Thanks so much for your time and help. If we’re at a dead end at least I know I can apply your proposal manually on an item-by-item basis.

Steve

[Leo]

I adjusted the CSS above – it should be better than using px like I had it before.

I’ll check with Tom to see if there are more clever solution 🙂

[Tom]

That’s the best way to do it if you absolutely need really long titles.

[Steven]

Thanks to you both.
Steve

[Leo]

Glad we could help 🙂

[Author]

Posts