Get 25% off GP Premium with the discount code: BLACKFRIDAY17

Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Resolved] adjust line height slideout menu item

Home Forums Support adjust line height slideout menu item

This topic contains 8 replies, has 3 voices, and was last updated by  Leo 1 week, 1 day ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #423262

    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

    GeneratePress 1.4
    GP Premium 1.5.2
    #423473

    Leo
    Staff

    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 ๐Ÿ™‚

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #423492

    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

    #423531

    Leo
    Staff

    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;
        }
    }

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #424282

    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

    #424625

    Leo
    Staff

    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 ๐Ÿ™‚

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #424645

    Tom
    Lead Developer

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

    #425191

    Thanks to you both.
    Steve

    #425238

    Leo
    Staff

    Glad we could help ๐Ÿ™‚

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.