Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Full screen menu design

  • bennyuk2
    May 25, 2023 at 7:35 am

    Is it possible to use elements or blocks to design specific layout for the full screen (offcanvas) menu?

    Thanks
    Ben

  • Leo
    May 25, 2023 at 9:18 am

    Hi there,

    Do you have an example of the design you are trying to achieve?

    This will help us to point you in the right direction.

    Let me know 🙂

  • bennyuk2
    May 25, 2023 at 11:31 pm

    Hi,
    Here is an example of a typical menu page (its not our actual design so I dont need this creating) but I would like to know recommended method to create full screen menus that have more complex layout and options.

    example menu

    many thanks
    Ben

  • fernandoazarcon2
    May 25, 2023 at 11:43 pm

    Hi Ben,

    I would assume this menu also opens through a Hamburger/toggle button? Such a designed fullscreen menu isn’t easily possible through GP. You’ll need a custom code or a third-party plugin.

    What’s easily possible through GP is an Off Canvas Panel overlay. You can also add Block Elements here through the slideout hooks. With some custom CSS, you can try making it look a bit like your screenshot. Making it look exactly like that would need much more CSS which would be out of our scope of support.

    Reference: https://docs.generatepress.com/article/off-canvas-panel-overview/

  • bennyuk2
    May 25, 2023 at 11:59 pm

    Hi
    EDIT: Yes, the menu access via the hamburger. What is the correct way to reference this? is it a full screen menu or off-canvas menu? (it should be accessed on all size devices, and adapt, not just mobiles)

    I’m not asking for the code or the design, I can create that fine.
    I’m asking for what approach you would recommend to achieve a new full screen menu layout?

    eg
    can I create a layout in a block element and override the normal layout using elements?
    (this would be ideal)
    or

    would I have to use the exiting menu that is output, apply extra css, and add extra code/content via particulat hooks, eg after_slideout_navigation

    Thanks
    Ben

  • fernandoazarcon2
    May 26, 2023 at 3:30 am

    We call that an Off Canvas menu.

    Rethinking this, I believe you can build that through a Block Element. You can hook it to inside_slideout_navigation.

    You’ll likely need CSS only for the close button and the sizing of the Block Element so that it occupies the entire Off Canvas Panel.

    So, I would suggest that you activate the Off Canvas Panel first through Appearance > Customize > Layout > Off Canvas Panel. Set it to be an overlay menu.

    Then, create your menu through a Block Element – Hook.

    Then, let’s see how it goes. I don’t recall someone trying something like this before. It’s just the usual off canvas menu, a mega menu, or a very simple menu but I think it’s doable – if not, a plugin may be needed.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.