Archived topic
Dont Want to use jquery and still want sticky navigation with CSS
5 replies · Started by Mouse on July 9, 2020
I researched and found this and implemented it to the website.
https://generatepress.com/forums/topic/sticky-navigation-5/
#site-navigation {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.header-wrap {
position: -webkit-sticky;
position: sticky;
top: 0;
}
Now it's not using jquery and it's sticky on desktop but not mobile devices.
1- How do I also make the navigation sticky on mobile devices?
2- Why can't I change the color of the header and the titles inside it?
3- Why the sticky slider is transparent and how to change its color?
Hi there,
1. You're using the mobile header, so you'd need to add this:
#mobile-header {
position: sticky;
top: 0;
}2. How are you trying to? Via the Customizer?
3. When your header is merged like it is, the plugin specifically re-styles the navigation when it's sticky to use your navigation colors. Since you're not using the built-in sticky solution, it can't do this. In fact, there is no way to target your sticky navigation, as it's not using JS to become sticky, unfortunately.
Okay I ended up fixing all the other things... the only issue is the mobile header not being sticky... with the code you provided even. I am using the theme volume
The code Tom provided does work.
Where are you adding it ? Wherever that is try moving that code to the very top of the CSS stack.
Hi thanks that fixed the issue for me.
Glad to hear that.
