Archived topic

Sticky Secondary Nav has some bugs

7 replies · Started by Sasha on June 20, 2021

Viewing posts 1–8 of 8

June 20, 2021 at 10:00 pm #1829093

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;
}

June 21, 2021 at 3:59 am #1829353

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

June 21, 2021 at 9:50 am #1830001

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.

June 21, 2021 at 10:52 am #1830058

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 :)

June 21, 2021 at 10:59 am #1830064

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)

June 21, 2021 at 11:06 am #1830069

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 :)

June 21, 2021 at 11:24 am #1830090

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!

June 21, 2021 at 11:47 am #1830113

You are welcome!

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

This archived topic is closed to new replies.

Start building better websites today.