[Resolved] Separate mobile menu – full screen off canvas

[Antal]

Hi,

I have three menu locations in use; main menu, off canvas menu (set on desktop to use extra menu items that are not needed to be seen directly) and a separate mobile menu (that holds all items combined from the main and the off canvas menu).
The separate mobile menu is created by your explanation here; https://docs.generatepress.com/article/using-a-different-menu-on-mobile/

The off canvas menu can be set to full screen with the latest release 1.8 (great!) but the mobile menu has no other options that to be a dropdown. Can this extra mobile menu also be set to full screen?

Thanks!

[David]

Hi there,

not that simple to do that, but could you share a link to the Site so i can take a look, may have some workaround to this.

[Antal]

Hi David,

This is an extremely basic (local flywheel) test enviroment; http://0e97f208.ngrok.io/
The idea is to have the basic site links in the main menu, the off canvas will be used for login/logout, account, personal content like lessons etc. The mobile menu will be a combination of both.

[David]

Theres no simple way of swapping the menus by device size.
What you could do is to create the Full combined menu and add this to the off canvas for mobile and desktop.
Then hide the menu items on desktop by adding the hide-on-desktop class to each of the menu items you wish to remove from the desktop off canvas.

[Antal]

Thanks David,
This is an elegant solution. 🙂
Is there a way to put the word ‘Menu’ (or something else) next to the hamburger of the slideout on desktop?

[David]

Awesome 🙂

You can try this CSS:

@media (min-width: 768px) {
    .slideout-toggle a:after {
        content: 'Menu';
        margin-left: 0.25em;
    }
}

[Antal]

You’re a hero Dave. Thanks a million. 🙂

[David]

Glad to be of help

[Author]

Posts