Site logo

[Support request] GP overlay full menu stylling

Home Forums Support [Support request] GP overlay full menu stylling

Home Forums Support GP overlay full menu stylling

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2091561
    Sonja

    Hi GP team,

    thx for fast template and usefull forum.

    It is possible to style GeneratePress overlay menu to have full page, open menus on hoover (with indication arrow etc) in horizontal way? Event. for mobile menu with left/right sliding submenus, in filetring part with manual close at product filtering (Woocommerce). Thx

    Full
    Full Overlay Menu (with arrows etc)

    Mobile
    Overlay Mobile Arrows Horizontal

    If it is possible i can add here url to external site with this menu styling

    #2091928
    David
    Staff
    Customer Support

    Hi there,

    i don’t think so – at least not without a lot of customization. Can you share the URL to that site i can take a look ?

    #2091955
    Sonja

    URL in private info.

    Btw not much difference there. The most important difference is:
    – The direction where the menu opens (gp goes in open panel on click down – the site in question opens on hover to the right).
    – Alignment. I added the main menu content to the overlay panel but I couldn’t align everything evenly underneath, and couldn’t place everything on the left side. Thank you.

    #2092396
    Elvin
    Staff
    Customer Support

    Hi Sonja,

    This’ll be a bit tricky as this will require A LOT of customization beyond the scope of the theme.

    But to help out, here are a few things to consider:

    For desktop, you may actually be better off creating a custom off-canvas panel placed hooked to generate_before_main_content that opens on click of the menu item trigger.

    This hooked element should be position: absolute; width: 100%; height: 100%; z-index: -1; opacity: 0; and then set div#pageto position: relative;

    You then write a script w/ a specific li.menu-item as a trigger toggling the hooked element’s z-index to 9999 and opacity to 1.

    This way, the hooked element is bounded to the page’s content and is showing on/off when li.menu-item trigger is clicked.

    As for the Hook element’s content, that’s another customization of its own as you’ll need to create the same idea of toggling an element using a li.menu-item but with the columns.

    As for the mobile, while at first glance, the off-canvas looks enough but the issue here is that you’ll need to create “tabs” by hooking things to generate_inside_slideout_navigation and then write another custom script for the toggling between the default menu in it and the element you’ve hooked.

    All of this is going to take a significant front-end custom development so you may want to consider hiring a developer for this.

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