[Resolved] Make Top Bar Sticky On Scroll

[Michelle]

How can I make my top bar sticky? I like my logo/header/nav the way it is now. I just want the top bar to stay on top and not disappear.

[Ying]

Hi Michelle,

Try this CSS:

.top-bar.top-bar-align-right {
    position: sticky;
    top: 0;
    z-index: 999;
}
nav#sticky-navigation {
    top: 39px !important;
}

Let me know 🙂

[Michelle]

Thank you. That partly worked. There is now a space where the top bar should be, but it is transparent, and not viewable. Maybe some tweaking could fix it. 🙂

[Ying]

Have you seen the live site without the admin bar activated?

For example in the customizer.

Let me know 🙂

[Michelle]

Hi Ying.

I turned off Maintenance Mode, refreshed, and checked the top bar. The purple top bar is there, but is translucent instead of opaque. (I can see text beneath it.) Otherwise, the code works. Any suggestions how to keep the top bar fully opaque?

[Ying]

That’s because your top bar background color is set to semitransparent:
https://www.screencast.com/t/Y3sq3fyX

You can change it in customizer > colors > top bar.

[Michelle]

Thank you. I will do that.

[Ying]

No problem 🙂

[Michelle]

Changing the color of the top bar worked for the desktop site, but it covers the sticky logo on mobile. (sigh) Is this fixable, I hope?

[Ying]

Yes 🙂 try add this CSS:

nav#mobile-header.is_stuck {
    margin-top: 39px !important;
}

[Michelle]

YEAH! You have no idea how happy this makes me! Thank you.

[Ying]

Haha I hope you are always this happy 😛

You are welcome!

[Author]

Posts