[Resolved] Sticky Secondary Nav has some bugs

[Sasha]

Hi there – 

After reviewing past support topics, I was able to make my secondary navigation sticky, and align it right underneath the primary nav (on desktop). Thanks!

Unfortunately, it appears a bit jittery when scrolling down. Any way to fix this so it’s completely static?

Also, it appears to be tucked behind the primary nav when I am logged into WordPress (with just the bottom edge visible). When logged, out, it appears correctly. Any way to fix this?

Here is the CSS I used:

.navigation-stick + .secondary-navigation {
    position: sticky;
    left: 0;
    right: 0;
    top: 40px;
}

[David]

Hi there,

Add this CSS to fix the overlap when logged in:

.admin-bar .navigation-stick + .secondary-navigation {
    top: 75px;
}

This will correct the top position when the admin-bar is visible – may need to tweak that top value a little.

When you say jittery – is it the sticky secondary nav that jitters or the page ? May just be my old eyes not noticing something obvious… let me know

[Sasha]

Thanks David! The CSS fixed the issue with the secondary nav not showing when logged it.

But yes, the jittery-ness is still there. More detail–

The height of the secondary nav bar shifts up and down, by a pixel or two, as I scroll down the page. (Not scrolling up and down, just straight down).

This also has the effect of the text on the bar shifting up/down by a pixel or two. It’s hard to notice when casually browsing, but quite headache inducing if you’re trying to read the text while scrolling.

This continues to happen even when I toggle my mouse controls over to smooth scrolling.

[Ying]

Hi Sasha,

I noticed that when the secondary navigation sticky, it moves up by 5px, not sure if this is the issue you were referring to.

If so, it’s because your CSS set its sticky position to top: 40px; while the primary navigation height is 45px.

change it to top: 45px; should work.

Let me know if I miss anything 🙂

[Sasha]

Thanks Ying! That seemed to help a little, but the issue is still visible.

Perhaps this screen capture video might help you diagnose? (Linked in private info)

[Ying]

I can’t replicate the same issue on Chrome/Opera/Firefox.

https://www.screencast.com/t/9nP2oXkpihgI

What browser are you using? Have you tried on another device?

Let me know 🙂

[Sasha]

Hi Ying – so strange! I am using Chrome as well. Maybe it’s a mouse issue?

I will try on my laptop later, and will reopen another ticket if the problem persists.

Thanks for your help!

[Ying]

You are welcome!

I think you are right, it might be the mouse, it seems jumping up/down a bit.

[Author]

Posts