[Resolved] Sticky Nav Causing Page Jump

[Trevis]

Hi guys, sorry to be the next one to post this issue again. I’ve seen several other topics related to this and tried the fixes suggested in each, but no luck.

Site: https://bluemysticdivers.com/

The page jumps when scrolling down a bit, and also does a weird snap when scrolling all the way back to the top.

Any help is greatly appreciated, as always! Thanks much!

[Leo]

Hi there,

Any chance you can disable all plugins except GP Premium to eliminate conflicts from other plugins first?

Let me know 🙂

[Trevis]

OK, looks like when I disable all plugins and bring them back the bug returns after I reactivate the Simple CSS plugin. So I’m guessing some CSS I’ve added is causing the issue, and looks like it’s something in this:

.main-navigation:not(.slideout-navigation) {
    position: relative !important;
    padding: 1.5% 2% 0;
    box-shadow: 0 7px 22px 19px #06131b !important;
}

.main-navigation.is_stuck {
    box-shadow: 0 7px 22px 19px #06131b !important;
    position: fixed !important;
}

When I remove

.main-navigation:not(.slideout-navigation) {
    position: relative !important;
    padding: 1.5% 2% 0;
    box-shadow: 0 7px 22px 19px #06131b !important;
}

the nav bar is not immediately visible when going to the page, but the sticky appears when scrolling up, and the jump persists.

When I remove

.main-navigation.is_stuck {
	box-shadow: 0 7px 22px 19px #06131b !important;
    position: fixed !important;
}

the nav bar is visible when you land on the page, but the sticky nav never engages, and the page jump persists, but slightly different.

When I remove the position setting from either class, things get even wonkier. As I’m understanding it now, something in this code is causing the issue, but deleting those lines also creates issues with the navigation, so I’m not sure exactly what’s going on.

I’ve created a user account you can use to login and check it out, details included in the private info section.

[David]

Hi there,

the Sticky Navigation creates a clone of itself when it goes sticky. Its purpose is a placeholder to fill the gap left when the navigation goes sticky.

Your CSS position: fixed property is also affecting the placeholder – so its not filling the gap as it too is now fixed.

Can you remove the CSS you listed above and then let us know what you want to do, and ill write up some CSS

[Trevis]

Ah, that makes sense. My main objective was to add a fade along the bottom edge and, due to my weak coding skills, ended up where I did. I just removed the CSS I had and replaced it with this:

.main-navigation {
    box-shadow: 0 7px 22px 19px #06131b !important;
    position: relative;
    padding-left: 20px;
}

And that seems to have done the trick! 🤦‍♂️ Not sure why I went the route I originally did, but I sincerely thank you for identifying the issue and pointing me in the right direction, as well as the offer to write valid CSS. Very grateful for your support and all I have learned from these forums. 🙏

[David]

Glad to hear you got it working – and thank you for the kind words 🙂

[Author]

Posts