[Resolved] Off Canvas Menu doesn't display on mobile phones

[Marc]

I have setup two menus, one for the main navigation and one for the Off Canvas Menu. It works perfectly on Desktop. But on mobile, I see the Off Canvas Menu when we press on « Menu » (the label of our mobile main navigation) on a mobile device, the Off Canvas Menu shows rather than the main navigation. I can have either the main navigation OR the off canvas on mobile, but can’t figure out how to activate the two. I have searched the forums and found many topics related to the same issue, but none of the solutions I tried (including adding things with widgets) worked.

On mobile devices, we need to display : ≡ Menu (normal drop down) ≡ Centre d’aide (off canvas)

Thank you in advance.

[Tom]

Hi Marc,

This is how we built the Off-Canvas Panel, unfortunately.

Have you tried setting the panel to “Desktop Only”?

[Marc]

Hi Tom,

I did, but what this does is we lose « half of our website on mobile ». Our use case is the following :

We are an office technology program in a college. Our program offers a Help Desk for the entire college community. So the desktop version of our website includes a menu (Principal) to navigate information about our program. The Off Canvas Menu is used to very clearly separate the Help Desk services we offer. It works great.

On mobile, what we need is to have TWO menu buttons : 1) ≡Menu, which opens the main menu (Principal) for our program topics. And the second menu 2) ≡Centre d’aide (Help Desk), which would simply bring up the Off Canvas menu for the Help Desk, with the same menu items as in the desktop version.

How could this be achieved?

[David]

Hi there,

You could use the Secondary Navigation for your Main Menu.
And your Primary Navigation to display just the Off Canvas Menu by assigning an ’empty’ menu to the Primary Navigation.
This would display both menus on the Mobile Version.

[Marc]

Hi, David.

I am sorry, I fear I do not understand your suggestion.

“You could use the Secondary Navigation for your Main Menu.”
>> What Secondary Navigation? Under Menus> Locations, we have Main Menu and Off Canvas Menu. Nothing else. I don’t see “Secondary Navigation”. I tried adding one with Widgets using Header (En-tête) and Top Bar (Barre du haut), but neither worked or seemed to help me progress in the right direction, so I don’t know if you were referring to widgets or not.

“And your Primary Navigation to display just the Off Canvas Menu by assigning an ’empty’ menu to the Primary Navigation.”
>> I created an empty menu and assigned it to “Menu principal” in our menu locations (is this what you call ‘Primary Navigation’?). It created an empty menu on mobile. Nothing showing on desktop.

I’ve reverted everything back to how I had things. Menu principal (Main menu) set to ‘Principal’ (the name I gave it) for our program’s menu. Maybe I should rename it ‘Programme’, it would be less confusing. But everything works. Then I set up our Centre d’aide menu (Help Desk) to the Off Canvas menu. So what you see on the desktop version is exactly the behavior we want and want to keep.

On mobile, we see ‘Menu’ which drops down our main menu (I will rename it ‘Programme’ too in the mobile label under Layout in the customizer). But we don’t see a button to display the Off Canvas Menu. That’s what we are seeking to do. We should have two buttons : one for the main menu (Programme) and one that brings up the Off Canvas menu for our helpdesk (Centre d’aide).

Should this be done through CSS? Hook? A modification in the PHP? We just need an option to make the Off Canvas Menu visible on mobile too.

Thanks in advance.

[David]

Enable the Secondary Nav module in Appearance > GeneratePress.
Then you will see the additional theme location:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

And you will have additional customizer options:
https://docs.generatepress.com/article/secondary-navigation-layout-overview/

[Marc]

It works, thank you!

[David]

You’re welcome

[Author]

Posts