[Resolved] How to keep "Top Bar" sticky as the "Navigation Bar"?

[Walter Schwarz]

Site “https://www.drwjs.eu”.

Scrolling down the navigation moves up and stays sticky. That’s what I want.
The “Top Bar” disappears thereby. That I do not want.
I would like to keep the “Top Bar” always visible above the “Navigation Bar”.
The problem seems to be that the “Top Bar” is inner part of the moving container (?) when scrolling.
I did need succeed to fix it.

Any hints?
Thank you,
Walter

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Walter Schwarz]

Hi David,

just finished.

[David]

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 */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Walter Schwarz]

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.

[David]

Glad i could be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kim]

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 */
}

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kim]

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!!

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kim]

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

[Leo]

Sounds good 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts