Archived topic
mega menu won't go full width
3 replies · Started by Paul on March 4, 2022
this mega menu article is great...
https://docs.generatepress.com/article/building-simple-mega-menu/
but, the mega menu doesn't expand full width, HOWEVER, if i use a sticky menu, it DOES on the sticky menu, that is when the page is scrolled down some.
see here on Services menu:
(see services menu scrunched width before scrolling the page, then full width after scrolling)
Hi there,
couple of options:
a. enable the Navigation as Header option is enabled in Customiser > Layout > Header
OR
b. Add this CSS:
.main-navigation:not(.is_stuck) .inside-navigation {
position: initial;
}
.inside-header {
position: relative;
}thank you! we used option b successfully.
i know a bunch about css but can't say i understand how that css solves the problem, but don't expect you to give a css lesson!
anyway, thanks again.
CSS position is a tricky one to explain.
When an elements position is absolute it has to have a parent element to which it is positioned relative too.
In the GP menus a sub menu ( li > ul ) is absolutely positioned, relative to the parent menu item ( li ).
In the mega menu CSS the first two rules change that relationship. Making the inside-navigation the nearest relative parent for the mega-menu > ul. So when left: 0; and width: 100%; is applied to the mega-menu > ul it takes up the same spacing as the inside-navigation.
The CSS I provided above makes the inside-header the nearest relative positioned parent allowing the mega-menu > ul to take up its spacing.
Hope that makes some sense lol
