[Support request] Off-canvas menu icon not showing up on mobile

[Matt]

Hi Friends,

I’ve scoured your support forum and I can’t find a complete answer for this.

I have a site that has a primary navigation and a secondary navigation activated. The primary navigation only shows the brand logo and the secondary navigation is what should be shown on everything but mobile. On mobile I want the off-canvas panel to show instead of the secondary menu. It doesn’t look like there is a built in way to do configure this…unless I’m missing something.

I tried removing the secondary menu on mobile with CSS and activated the off-canvas panel on mobile but for some reason the off-canvas hamburger isn’t showing up anywhere? Sidenote…when I turn the Off Canvas Panel setting to “on” or “desktop” the hamburger shows up on the primary navigation row.

Settings:
Sticky navigation is enabled
Off Canvas Panel is set to Mobile Only
The same menu is assigned to both the secondary navigation and the off Canvas panel

If anyone has any ideas on how to resolve it would be much appreciated!

[Leo]

Hi there,

The primary navigation only shows the brand logo

Is there a specific reason for this?

If not I’d recommend disabling the navigation as header option:
https://docs.generatepress.com/article/navigation-as-a-header/

Then set the alignment to center:
https://docs.generatepress.com/article/header-layout/#header-alignment

Then replace the current secondary navigation with primary navigation.

Let me know 🙂

[Matt]

Ok, I took your advice and instead of using two menus, I disabled the header as a navigation and rearranged the menu’s the only problem now is that the sticky menu has a substantial gap at the top of the screen. I can’t seem to remedy. Any ideas?

[Leo]

This CSS you’ve added is causing the issue:

#sticky-navigation {
    top: 40px !important;
}

[Author]

Posts