[Support request] Top navigation menu items in two lines

Home Forums Support Top navigation menu items in two lines

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #277196
    Monika

    Hi there,
    Some of my menu items are very long and I would like to style them so that they are displayed in two lines. When I add a <br> to the navigation label, wording is displayed in 2 lines, but the line height is way too big…could you please help with this issue? Thank you.

    GeneratePress 1.3.44
    GP Premium 1.2.94
    #277204
    Leo
    Staff
    Customer Support
    #277215
    Monika

    Yep – that did the trick! Thank you so much, Leo!

    #277219
    Leo
    Staff
    Customer Support

    You’re very welcome. Credit to Tom 🙂

    #277713
    Monika

    Hi there, I’ve got another question in regards to the navigation set-up. Now that I have my navigation menu styled to display in two lines for desktop, how can I style it to display as just one line for mobile and iPad? As always, I appreciate your assistance. Thank you!
    Monika

    #277716
    Leo
    Staff
    Customer Support

    Hi Monika,

    Try wrapping the code Tom provided with this:

    @media (min-width: 1024px) {
        /* CSS in here for desktop only */
    }

    Let me know.

    #277763
    Monika

    Hi Leo,
    thank you for your reply. It’s not working yet. I don’t know much about coding, so this is how I updated the css style sheet (see below)… is this correct?… or do I need to add this around the <br/> code in the actual menu?….


    @media
    (min-width: 1024px) {
    .main-navigation .main-nav ul li a,
    .menu-toggle, .main-navigation .mobile-bar-items a {
    line-height: inherit;
    padding-top: 10px;
    padding-bottom: 10px;
    }
    /* CSS in here for desktop only */
    }

    The only thing that changed after I added the code to the css style sheet was that the mobile menu is now closer together, there is no padding between each menu item… but each menu item is still displayed in two lines.

    Monika

    #277934
    Leo
    Staff
    Customer Support

    On a second thought the code way actually won’t work since the <br> tags are inserted in the menu.

    I think the easiest thing to do is to create the exact same menu without the <br> tags and set it to your mobile menu 🙂

    #277948
    Monika

    Is there a post or link to instructions on how I create a separate menu for mobile? I didn’t see an option anywhere… but maybe I just missed it? Thank you!

    #277949
    Leo
    Staff
    Customer Support

    Checkout this page: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/

    The menu you are using right now is probably set to Primary Menu. You can create the exact same menu without the break tags and set it to Slideout Menu for mobile.

    Let me know if you need more info.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.