[Resolved] Mega Menu Width Setting When User Scrolls

[TWMA Support]

Hi

So just another fix I am looking for on the mega menu. I got the width looking great on the site pre-scroll but when the user scrolls the menu width becomes the full width of the screen and doesnt look great.

I know it has something to do with the sticky menu changing width on scroll, but I cant see where in teh css to change this.

The site is on my staging server and dont want to publicise the link so you can see whats happening. Do you have a mail address can send the link to along with screen shots?

Thanks

[Tom]

Sure, you can send it through this form: https://generatepress.com/contact/

[Tom]

Try this CSS:

@media (min-width: 769px) {
    .navigation-stick #primary-menu {
        float: right;
        position: relative;
    }
}

[TWMA Support]

Hi Tom

Thats great thanks. Worked a treat.

[Tom]

You’re welcome 🙂

[Waseem]

Hi Tom.

I’m having a similar issue as above, and when I tried the code it gives me a narrow version of my mega menu. I’d like it to stay the same width as before I scroll.

https://www.sourceonetechnology.com/

Thanks

[Ying]

Try adding this CSS:

.inside-navigation.grid-container {
    position: relative;
}

[Waseem]

Ying when I tried that it didnt do anything and just made it narrow on scroll.

However when I add this:

@media (min-width: 1025px) {
    .inside-header {
        position: relative;
    }

    .inside-navigation.grid-container {
        position: static;
    }

    .navigation-stick .inside-navigation.grid-container {
        position: relative;
    }
}

It works. Thanks

[David]

Hi there,

try clearing your browser caches, as on my browsers the width is the same when it is sticky.

[Waseem]

Yup, it works. Thanks

[David]

Glad to hear that !

[Author]

Posts