[Resolved] Change second navigation menu to mobile when starts to stack

Home Forums Support [Resolved] Change second navigation menu to mobile when starts to stack

Home Forums Support Change second navigation menu to mobile when starts to stack

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1350519
    William

    Hi there,
    Is there a way to make the second nav on the site go straight to mobile version when the menu starts to stack, such as the example below (example link of page in question here)
    Menu stacked example

    Also, for the second navigation menu, is there a way to have the menu options that have two words stacked (so ontop of each other) to reduce the width size?
    Many thanks as always

    #1351032
    Leo
    Staff
    Customer Support

    Hi there,

    Just to confirm, are you using 0px as the mobile navigation breakpoint currently?
    https://docs.generatepress.com/article/mobile-navigation/

    #1351039
    William

    Hi there,
    The menu in question is the secondary navigation menu, so no unfortunately.

    #1351208
    Leo
    Staff
    Customer Support

    Yes I know but your primary navigation is also not changing to toggle.

    Just wondering if that’s intended?

    #1352037
    William

    That’s intended 🙂 Primary navigation only has two links and I want them to always show regardless of width of device. All the points above are for the secondary nav menu

    #1352273
    Leo
    Staff
    Customer Support

    Can you link me to a page where I can see the secondary nav?

    #1352533
    William

    Yes here

    So there’s two points:

    1) when there is two words, to have it stacked to reduce the width

    2) to change the point that it changes to mobile so the menu doesn’t double up and stack

    #1352580
    David
    Staff
    Customer Support

    Hi there,

    try this:

    @media (max-width: 1300px) {
    
        .secondary-navigation .menu-toggle,
        .secondary-navigation .mobile-bar-items,
        .sidebar-nav-mobile:not(#sticky-placeholder) {
            display: block;
        }
    
        .secondary-navigation ul,
        .gen-sidebar-nav {
            display: none;
        }
    
        [class*=”nav-float-“] .site-header .inside-header>* {
            float: none;
            clear: both;
        }
    }
    #1352806
    William

    That’s great thank you!

    #1352830
    David
    Staff
    Customer Support

    You’re welcome

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