[Resolved] The sticky menu loses its property in the middle of scrolling

[Jean-Pol]

I use GeneratePress Pro with Elementor on a school site.
I want the menu to be sticky. It’s fine, except that when I scroll the page, the menu disappears after about the middle of the page. Where is my error?

Thanks !

[David]

Hi there,

seen this a couple of times, where some other plugins jQuery is effecting the sticky element – which is troublesome to fix. Can you disable the Sticky Navigation and try this CSS solution instead:

.main-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

[Jean-Pol]

Thanks David !
I did what you advise, but now the main menu behaves like the sidebar: the sticky effect disappears at half of the page.

[David]

Aah should have spotted this before, you have some CSS that i assume is for forcing short pages to fill the screen so the footer always sits at the bottom of the screen. This CSS:

html,
body {
    height: 100%;
}

Change the height to a min-height property.

Should be able to remove the CSS and resume using the Sticky Nav.

[Jean-Pol]

Thank you David! As usual, accurate help, effective, fast. The support of GeneratePress is the best I know.

[David]

Glad to be of help.

[Emily]

I had this same issue and found it was an embedded BBB Seal that was causing trouble. It was adding CSS to the html,body. So I added this to the Additional CSS and that fixed it right up.

html,body{height: intial !important; min-height: 100% !important;}

I love your theme and support so much. Thank you, David!!

[David]

Thats great to hear = so glad you found it of use Emily 🙂

[Author]

Posts