- This topic has 3 replies, 3 voices, and was last updated 3 years, 8 months ago by
Elvin.
-
AuthorPosts
-
January 24, 2022 at 4:55 am #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
Mobile
If it is possible i can add here url to external site with this menu styling
January 24, 2022 at 7:55 am #2091928David
StaffCustomer SupportHi 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 ?
January 24, 2022 at 8:13 am #2091955Sonja
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.January 24, 2022 at 5:27 pm #2092396Elvin
StaffCustomer SupportHi 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 setdiv#page
toposition: 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.
-
AuthorPosts
- You must be logged in to reply to this topic.