Include main menu with off canvas button on mobile devices

[Adam]

Hello. I have a primary menu with pages like about, contact, account. Then I have an off canvas menu that has the store product category buttons.

This works well on desktop, but on mobile the primary menu disappears. There is just the off canvas toggle button that opens the off canvas shop menu. I would like to have that off canvas toggle button as a menu option on the primary menu, and for the primary menu to show on the mobile devices.

I can’t seem to get this to work. When I make a custom menu link using
<a class="slideout-toggle custom-slideout-toggle" href="#"></a>
on the main menu to trigger the off canvas menu, and hide the default off canvas toggle menu button by using

.main-navigation .slideout-toggle:not(.custom-slideout-toggle) {
    display: none !important;
}

But doing that combined with the various settings in customizer: Layout >
Off Canvas Panel does not solve the problem. On mobile I am either forced to use the off canvas menu instead of the primary menu, or turn the off canvas menu entirely for mobile. I can’t seem to combine the off canvas buttons/functions into the mobile primary menu.

Thank you,

[David]

Hi there,

Currently for Mobile, it is either the Primary Mobile Menu OR the Off Canvas Menu – not both.

If you want the Mobile Off Canvas to display your Primary Navigation and your Store Menu then i suggest you add one of those menus as a Navigation Widget to the Off Canvas Panel. Then use some CSS to hide it on the Desktop.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Adam]

Thanks David, that accomplished what I wanted.

Cheers,

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts