[Support request] How to add a hamburger menu to the header element?

[Sascha]

Hi

I’ve created a global header via Elements > Blocks that consists of a Container, Grid (2 Col) and the icon on the left and 3 Headline-blocks as items of the menu on the right as Element Type: Site Header / Display Rules: Frontpage (all other pages will have a header with different menu-items).

First, I’d like to know if this is recommended practice for building a global header using Gutenberg & GenerateBLocks, or if you’d recommend a different approach? Can’t find any tutorial for building headers with Elements in your docs yet.

Now, for mobile screens, I’d like to replace the 3 Headlines (which are used as Nav-Menu-Items each) with a Hamburger-styled Menu. How can I achieve this? No Off-canvas required, as all these menu-items are anchor-links on the homepage.

I feel a bit lost here and appreciate your support.

Thank you in advance and kind regards,
Sascha

[Elvin]

Hi there,

First, I’d like to know if this is recommended practice for building a global header using Gutenberg & GenerateBLocks, or if you’d recommend a different approach? Can’t find any tutorial for building headers with Elements in your docs yet.

Using GP Premium 2.0, you can create your own Site Header using Block Element – Site Header on Appearance > Elements.

This basically replaces the default Site header with a Site Header created from Block element.

But as for having a nav menu hamburger within a block element, the recent WordPress update (5.8) removed the navigation menu block so you’ll have to get a menu plugin that adds a block on Gutenberg or lets you add a menu from a shortcode.

[Sascha]

Hi, thanks for your reply.

“you’ll have to get a menu plugin that adds a block on Gutenberg or lets you add a menu from a shortcode.”

Could you please provide more precise help? What other “menu plugin” do you have in mind, that will add a menu block?

Still, I’m not sure if your reply does this method via Elements as the best practice in my particular case (Hamburger Menu etc.) Could you elaborate more, please?

Thanks
Sascha

[Ying]

Hi Sascha,

It’s not easy to turn GB headline blocks to a hamburger menu icon on mobile, it requires some custom development.

Will you only have 2 sets of menus?

If so, I would recommend using default GP navigation, and use CSS to hide some of the menu items on specific pages.

If you’ll have more menus, then give these menu plugins a try:
https://en-ca.wordpress.org/plugins/if-menu/
https://wordpress.org/plugins/conditional-menus/

Let me know if this helps 🙂

[Author]

Posts