Hamburger Menu for Navigation Collapsed Element

[santosfel5]

I’m building a menu page for a restaurant and I’ve created a secondary anchor menu that exists on the content of the page to allow users to go to specific food categories on the page. The only problem is this menu looks ugly on mobile.

What I’d like to do is hide this long menu on mobile and show a Navigation Collapsed Element as a hamburger for mobile users. How would I go about doing this?

Here is the site I’m working on: http://citizencrust.wpengine.com/menu/

[ruenel]

Hello @santosfel5,

Thanks for writing in!

To resolve your issue, simply insert a Navigation Collapsed element next to the current Navigation Inline element.

And then in the Customize tab in each element settings, find the “Hide During Breakpoint” option so that you can show or hide the element in the respective screen size. To learn more about the “Hide During Breakpoint” option, please check this out:

• https://theme.co/docs/hide-or-show-content-by-device-size

Hope this helps. Please let us know how it goes.

[santosfel5]

I did that but it doesn’t turn into a hamburger menu on mobile. How do I make the navigation collapsed into a hamburger menu?

[nabeel]

Hey @santosfel5,

You need to hide the other menu in mobile screens so that only hamburger menu is visible. To do that please follow this thread here Mobile Menu no toggle

Let us know how this goes!