-
I’m using Site Header Element with the navigation block: site header and navigation block
And when I assign Mega Menu overlays set to “Full Width” they extend past the edge of the navigation block container.
you can see it in action now for the “Visit” and “Support” navigation menu items at https://stg-morikami-staging.kinsta.cloud/
What I’m expecting is the mega menu to extend the full width of the navigation block, like this:
I’ve tried setting the width to “Max Content” at the mega menu overlay panel level but that still generates some menus extending past the screen’s max width.
I feel like I’m missing something straightforward here. Suggestions?
-
Hi there,
In the mega menu overlay, can you set the Position to Parent to
.gb-site-header?Please check this screenshot below for reference:
https://app.screencast.com/olQjmml10Uk4HLet me know if this helps!
-
Better but that is still generating a full screen width result (that’s what the header block is set to). I tried .gb-navigation as well but still get this result:
I tried setting the actual navigation block to var(–gb-container-width) as max width but it had no effect.
I’ve also tried setting the overlay parent block to var(–gb-container-width) but it had no effect as well.
-
What layout are you trying to achieve? Do you want the mega menu to have the same width as the navigation block?
You’ve set the overlay’s width mode to full width currently, can you try changing it to max content?
-
Eh…no link as well…
-
Wow, something must be filtering them out. They are hosted at screencast so I’m not sure what the issue is plus I’m using the native link function in the toolbar. This is very frustrating. Let me just paste it as code:
https://app.screencast.com/LOiVDh1bfleAx -
I can see your screenshot now 🙂
Have you tried this?
You’ve set the overlay’s width mode to full width currently, can you try changing it to max content?
-
Already tried that (per my initial post) and that still runs content off screen for menu items to the right.
Is there really no way to bound the overlay panel to the width of the navigation menu?
-
Try this CSS:
.menu-item-has-gb-mega-menu .gb-overlay--anchored.gb-overlay--width-full { max-width:100%; transform: translate(0,0) !important; top: 100% !important; } .gb-menu-container .gb-menu >.menu-item.menu-item-has-gb-mega-menu { position: static; } -
Can do but with which settings in place for the overlay? Full width and .gb-site-header or .gb-nav?
-
It should work with your current setup.
-
That did the trick, thank you! Is there no other way to get to that point without the custom CSS? Would I get the same result by applying the static position and transform values to the mega menu overlay parent container?
-
Yes, you should be able to apply those settings at the block level, except
transform, as it requires!importantto override the default CSS. -
Roger that, I was wondering if the override might be the reason to use the CSS. Any plans you’re aware of in the deve timeline where this is going to become a setting?
-
I don’t think it will be changed in the near future, unfortunately!
- You must be logged in to reply to this topic.