[Resolved] Single hamburger toggle for both primary and secondary menus.

[K]

Hello,

I find having two mobile menu toggles to be confusing for end-users.

I just want one mobile menu toggle (the primary one) to handle toggling for both primary and secondary menus. Basically, hide the secondary toggle, and have the primary toggle open/close both menus at the same time. I’ve been searching the forums, but I can’t find anything that accomplishes this. Can you assist please?

Thanks.

[Leo]

Hi there,

You can hide the secondary navigation on mobile with this CSS:

@media (max-width: 768px) {
    #secondary-navigation {
        display: none;
    }
}

Two options for adding menu items:

– You can create a new menu with all the items you want showing then use the slideout navigation on mobile:
https://docs.generatepress.com/article/activating-slide-out-navigation/

– Add all the menu items you want showing on mobile to the current primary menu, then use the hide-on-desktop class to hide the ones that should only show on mobile. See the first example here:
https://docs.generatepress.com/article/activating-slide-out-navigation/

Let me know if this helps 🙂

[K]

Hi Leo,

Thank you for showing me how to hide the secondary menu, I will try that out shortly.

I think you misunderstood my second question. What I need is the existing primary menu toggle to open/close both the primary menu along with secondary menu at the same time.

The goal is: Just a single toggle for both menus.

Thanks.

[Leo]

Hmm I don’t think I misunderstood.

So sounds like you only want one menu on mobile (primary navigation) that includes all the menu items?

If so that’s what my suggestions were for.

[K]

Not exactly what I need. I need all items from both menus to show, regardless of desktop/mobile. I ran out of space in the primary menu, so I added the secondary menu to put in additional menu items.

I have the secondary menu module active. Both menus show perfectly on desktop. However on mobile, I have two hamburger menus, both labeled “Menu”.

I want to hide the secondary hamburger menu, and have the primary hamburger menu toggle both the primary menu and the secondary menu at the same time.

In essence, users will just see the single primary menu toggle, yet *both* menus will show/hide when the user clicks on it.

(See my site to better understand why desktop is clear, yet mobile Is confusing to users with two “Menu”s.)

[Leo]

I am having a hard picturing how this would work.

What is supposed to show where the secondary toggle used to be?

Have you thought about creating a menu with all the items and use slideout navigation on mobile instead?

If not can you show me a working example of other sites doing what you want?

[K]

Go to my site, in mobile size.

You will see two Menu toggles at the top. Click on both toggles.

This is how I want it to look if you ONLY pressed the first Menu toggle. The second Menu toggle would be simply hidden.

[K]

I would think JavaScript could do it like this pseudo-code:

if .primary-menu.toggled then
  .secondary-menu.addClass(.toggled)
else
  .secondary-menu.removeClass(.toggled)

[Tom]

Hmm, you could try something like this:

<script>
    var toggleSecondaryNav = function() {
        var secondaryNav = document.querySelector( '.secondary-navigation' );

        if ( secondaryNav.classList.contains( 'toggled' ) ) {
            secondaryNav.classList.remove( 'toggled' );
        } else {
            secondaryNav.classList.add( 'toggled' );
        }
    };

    document.querySelector( '.main-navigation .menu-toggle' ).addEventListener( 'click', toggleSecondaryNav, false );
</script>

[K]

Perfect, thank you!

[Tom]

You’re welcome 🙂

[Author]

Posts