[Resolved] Easy way to create a new hamburger menu in a custom location?

[Katie Jones]

Hi hi,

Is there an easy way to apply the hamburger menu to a custom menu location (calling wp_nav_menu in a GP hook)?

The menu in question is here, showing blog categories – “What People Say”, etc: http://otteroo.staging.wpengine.com/blog/ – I want this to function like a default GP menu (links show at full width, hamburger on mobile).

I’m not currently using a hamburger menu anywhere, though I am using the primary/secondary navigations and disabling the hamburger menu. So if what I’m asking to do isn’t simple I can rearrange things and use one of those navigations for my custom location, I’m just hoping there’s an easier way first.

Thanks!

Katie

[Tom]

Hi Katie,

In the next version of GP (beta soon), you can do this by using the menu-toggle class, and adding a data attribute to it targeting the target div.

Otherwise, you would likely need some custom javascript with the way things are built currently.

[Katie Jones]

Awesome! Any chance this beta will be out by early next week? My client wants to launch Wednesday so I’ll have to decide whether to roll my own solution or wait for the beta. Thanks!

[Tom]

You can play with it now if you’d like: https://github.com/tomusborne/generatepress/tree/reorganize

So, your target navigation would have to like like this:

<div id="my-custom-nav" class="main-navigation">
    Nav in here
</div>

Then your toggle would be like this:

<button class="menu-toggle" data-nav="my-custom-nav">Menu</button>

[Katie Jones]

Hey Tom, thanks! I started to use this and it wasn’t working, so eventually just switched things around to use the secondary menu, then realized what it was in my theme that was making it not work in the first place. Next time, and thank you! 🙂

Thanks,
Katie

[Tom]

Interesting, I’ll play with it to make sure it works – that’s one of the things I tried to do in the JS rewrite.

[Author]

Posts