Topic: Make the mega-menu full header width

cleanpagedom
March 29, 2024 at 12:30 am

Hi there

I would like to do the opposite of this support request: https://generate.support/topic/sub-menu-mega-menu-width/

I have created a mega menu using the GP docs, which opens when you click the parent menu item. When the menu is at the top of the screen it is constrained to the width of the primary navigation (around 835px).

Sticky navigation is on. When you scroll down the page and open the mega menu, it fills the width of the container (1140px). I would like the mega menu to be 1140px (or full header width) all the time. Is there a way to achieve this?

Thank you
David
March 29, 2024 at 5:36 am
Hi there,

the ideal solution would be to use the Navigation as Header option in the Customizer > Layout > Header.

the alternative with the current header layout, which gets you somewhere close is to add this CSS:
```
#site-navigation:not(.is_stuck) .inside-navigation {
    position: static;
}
.inside-header {
    position: relative;
}
```
cleanpagedom
March 29, 2024 at 8:46 am

Perfect. The “Use Navigation As Header” does the trick. Just have to adjust the size of the logo and add some padding to the header.

Thank you.
David
April 1, 2024 at 2:33 am

Glad to hear that!
Let us know if you need any assistance with the logo size and padding.

Viewing 4 posts - 1 through 4 (of 4 total)

Make the mega-menu full header width