[Resolved] Separate mobile menu – full screen off canvas

Home Forums Support [Resolved] Separate mobile menu – full screen off canvas

Home Forums Support Separate mobile menu – full screen off canvas

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #880144
    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!

    GeneratePress 2.2.2
    GP Premium 1.8.1
    #880190
    David
    Staff
    Customer Support

    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.

    #880198
    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.

    #880244
    David
    Staff
    Customer Support

    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.

    #880257
    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?

    #880273
    David
    Staff
    Customer Support

    Awesome πŸ™‚

    You can try this CSS:

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

    You’re a hero Dave. Thanks a million. πŸ™‚

    #880280
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.