How to keep "Top Bar" sticky as the "Navigation Bar"?

Hi there,

could you disable the sticky navigation, so i can provide the CSS that would be required to make this work

Hi David,

just finished.

Hi there,

add this CSS, note that the #site-navigation top position needs to reflect the height of the top bar, currently that is 21px.

.top-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 99;
}
#site-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 21px; /* This is the height of the top bar */
}

Hi David,

thank you so much - it works as expected in Firefox, Chrome and Opera.
IE still slides to top bar into the nirwana ... But that does not bother me.

Glad i could be of help :)

Hi,

Could you please help me out?

I am trying to get both top bar and header sticky. So not only the header. When I enable 'Sticky Navigation' I only get a sticky header. So I disabled the sticky navigation and copied the CSS below (after reading support options on this forum) but unfortunately it doesn't work. Same with any other options I tried.

I hope you can assist! Much appreciated!

Thanks,
Kim

.top-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
#site-navigation {
position: -webkit-sticky;
position: sticky;
top: 21px; /* This is the height of the top bar */
}

Any chance you can link me to the site in question with the CSS applied?

Hi Leo,

I read it in David's (customer support) comment on this page. Dated October 3, 2018 at 3:31 am.
Do you have an alternative way for me how to get both header AND top bar sticky?

Thanks so much!!

David's way should work so we need to see your site with the code applied to see why it isn't working.

Can you link us to it?

Feel free to open a new topic so you can use the private URL field as well.

Let me know :)

Thank you Leo! I will open a new topic now to use the private URL field.

Sounds good :)