how to prevent top navigation menu from stacking

[Robin]

Hello again. The navigation across the top goes to two lines at a certain width (the menu items go below the site logo so that the header/navigation is essentially two lines instead of one), right before switching to the mobile menu. I’d like to prevent that. Prevented it by setting mobile menu breakpoint to 1025 width, but is there another way to do it?

[David]

Hi there,

the only simple alternatives would be to reduce the font size and spacing of the menu items, although i am not sure that would be a better solution.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Robin]

Thank you.Right: many menu items and type already small.

And not-simple alternatives?

[David]

You could use some CSS to make the logo float above the nav:

@media(min-width: 1100px) and (max-width: 1300px) {
    .main-navigation.has-branding .inside-navigation {
        flex-wrap: wrap;
    }
    .main-navigation:not(.slideout-navigation) .main-nav {
        flex: 1 0 100%;
    }
}

Min-width being where you set your mobile menu breakpoint and max-width being where the menu items hit the logo. Which buys a little more space.

Other options. Relocate some of your more static links such as Contact and About us to another nav. You can always use the Off Canvas panel for your mobile nav, which can display a different menu that has all items in one place.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts