[Resolved] mega menu won’t go full width

[Paul]

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:

https://new.daggerfinn.com

(see services menu scrunched width before scrolling the page, then full width after scrolling)

[David]

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;
}

[Paul]

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.

[David]

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

[Author]

Posts