-
Hi,
Thanks for GP One,
I’d like to have, briefly, if it’s possible (and how in this case) to implement overlay panels with dynamic datas: an overlay of the featured image of the hovered element. Also, how to just implement that (without necessarily dynamically)
See the site’s navigation menu to understand (features and blog)
-
Hi there,
That isn’t possible at the moment. This feature is planned for a future release, but there’s no timeline available yet.
If you want to implement a static mega menu, this documentation explains it in detail:
https://learn.generatepress.com/blocks/block-guide/mega-menu-overlay-panel/ -
Thanks. I’ll check that.
-
You’re welcome!
-
I’m trying to replicate these menu. The image section is also an overlay.
I set an anchored type overlay https://learn.generatepress.com/blocks/block-guide/getting-started-generateblocks/generateblocks-pro/overlay-panels/#anchored-type
And set it relatively to the left menu section, but it’s not working. Don’t know if it can work in this case, (overlay on an overlay element), or there’s something else.
-
I’m not sure I understand your setup. Can you provide some screenshots of your setup?
-
There’s a first overlay set for the features menu.
I set a second overlay (anchored type), which assigned (position to parent) to the second menu (automated follows-ups) in the features (overlay) menu, which is .gb-element-824a7ddc, with trigger type: hover
-
Did you set up the Overlay Panel Trigger for the text automated follow-ups?
https://app.screencast.com/taqKCARdKAJIPPlease note that the option is only available for GB blocks.
-
I didn’t. Thanks, it’s working now.
-
I set the second menu overlay, but the image seems not centered
Don’t know exactly what’s the issue. The width in the second overlay is calculated from the parent container’s width minus the paddings /2 (there’s no gap space, as it’s set to space-between). Since i can’t use the relative width in this case, which is 50% in the first overlay. Image container’s block have the same global styles (asides from the width, relative/calculated), and the image block are using same global styles
-
Can you set to trigger method to click for now, as the hover state is really difficult to check in the developer tool?
Thank you!
-
Sorry for that. I’m working on it at the moment.
-
I’v set it on click. see this test page: https://azure-quetzal-266157.hostingersite.com/test-page/
The first menu is an overlay. The image is set on the first overlay. The second menu in the overlay is an overlay, and the image don’t have exactly the same positioning as the first image. Although the image’s container’s and the image are using same globale style, asides from the image container’s width (relative %/calculated).
-
Thanks for the change, it’s much easier for me to see the structure.
The 2 overlay panels are inserted in different ways. One is inside another overlay, while the other one is standalone.
Can you try inserting them using the same method? So they can live in the same HTML structure.
Let me know if you have a specific reason not to 🙂
-
Yes, there’s a reason for that, the overlay menu needs to have the first image when hovered. Sorry looks like i have removed the original site’s link: https://clevenio.com/
-
Thanks for the original site link, that helps!
I think the mega menu can be achieved with a tabs block, and with some simple JavaScript to make it work for hover.
Will you consider that?
- You must be logged in to reply to this topic.