[Support request] how to prevent top navigation menu from stacking

Home Forums Support how to prevent top navigation menu from stacking

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1353267
    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?

    #1353438
    David
    Staff
    Customer Support

    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.

    #1353873
    Robin

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

    And not-simple alternatives?

    #1354060
    David
    Staff
    Customer Support

    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.

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