[Resolved] How To Get Hamburger Menu on Desktop

[Melanie Swan]

Hello,

Does anyone know how to get the hamburger style menu on desktop. I have GP Premium.

Melanie.

[David]

Hi there,

you can enable the Customizer > Layout > Off Canvas Panel.
Make sure you assign a menu to the Off Canvas Panel.

And if this is the only navigation you want to display on Desktop you will need to create blank menu ( ie. no menu items ) and assign that to the Primary Navigation.

[Melanie Swan]

fantastic.

all done and it’s working.

I would like the hamburger icon to be bigger so it’s more obvious.
I’ve played around with the settings and can’t get it bigger (I can get the off-canvas text bigger) but not the icon.

thank you!

[Leo]

Have you tried Customizer > Typography > Primary Navigation > Font size?

Let me know 🙂

[Melanie Swan]

aha! thank you 🙂

[Leo]

No problem 🙂

[Christine]

“And if this is the only navigation you want to display on Desktop you will need to create blank menu ( ie. no menu items ) and assign that to the Primary Navigation.”

When I follow the instructions above, I get the hamburger menu on my desktop—-which is what I want. However, the formerly nicely formatted hamburger menus on my mobile devices then get completely messed up. So currently, I have the SAME menu assigned to both the Primary Menu location and the Off Canvas Menu location, which only partially alleviates the mobile formatting issue. (Also: is this creating a website problem that I don’t know about?)

What I really want is a hamburger menu to display on my desktop, AND my mobile menus to stay the same as they were when just the Primary Menu location was activated.Is there a way to do this?

Thanks in advance! Appreciate all replies.

[David]

Hi there,

the method described above works if the Off Canvas panel is used on Mobile and Destkop. And no, using a blank menu wouldn’t cause any issues.

If you need to keep the default mobile menu, then:

1. Create your Menu and set its Locations to Primary and Off Canvas.
2. Set the Off Canvas Panel to Desktop Only.

Then if you could raise a new topic where you can share a link to your site in the Private Info field, we can provide some CSS to remove the menu items from the default desktop nav.

[Angelica Medina]

Hello, I follow the steps above regarding off canvas panel menu for the same same across all devices.

On the mobile version, it splits the alignment of my “sticky navigation logo” apart from the hamburger to opposite ends, while desktop and tablet remain in the center.

How can I align the the sticky navigation logo and hamburger to the center for mobile?

[Elvin]

Hi Angelica,

Can you open a new topic for your site? So you can use the private information text field to provide more details for your site (site link, etc) so we can check things for you. 🙂

[Author]

Posts