[Resolved] How to make an Icon open an overlay menu?

[Giacomo]

Hi,
I’m trying to make a very simple header across all device. It’s just one row and it has an icon / image of the hamburger menu toggle and the logo.
I created the menu and selected the “Off Canvas” option. In the Customizer I activated the off canvas panel and I added the created menu in the widget area in the off canvas panel options.

Now I’m confused: I would like the icon in header to toggle off canvas menu, but I don’t understand how to achieve that. Should I use a specific link?

Thanks

[David]

Hi there,

can i see the site where you are having the issue ?

[Giacomo]

Sure: https://consortium.de/wp/

The icon is the one on top left, in the header.

[Ying]

Hi there,

It seems you’ve built a custom header.

As the off-canvas menu is a GP feature, the button has to be in GP’s header in order to trigger it.

Can you try using GP’s default site header? Then follow the below steps:

1. You can follow the guide here to center your site logo:
https://docs.generatepress.com/article/centering-logo-navigation/

2. Go to customize > layout > primary navigation, set Navigation Location to `float left.

3. Add this CSS:

.main-navigation ul#menu-primary {
    display: none;
}

[Giacomo]

Thanks for the support, now my menu is what I needed.

[Author]

Posts