[Support request] Top navigation menu items in two lines

[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.

[Leo]

Hi Monika,

This post might help: https://generatepress.com/forums/topic/css-line-break-menu/#post-202661

Let me know.

[Monika]

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

[Leo]

You’re very welcome. Credit to Tom 🙂

[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

[Leo]

Hi Monika,

Try wrapping the code Tom provided with this:

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

Let me know.

[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

[Leo]

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 🙂

[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!

[Leo]

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.

[Chris]

This worked for me:

#primary-menu a:link {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.3em;
    min-height: 100px;
    text-align: center;
}

[Leo]

Glad to hear 🙂

[Author]

Posts