[Resolved] Dont Want to use jquery and still want sticky navigation with CSS

[Mouse]

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?

[Tom]

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.

[Mouse]

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

[David]

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.

[Mouse]

Hi thanks that fixed the issue for me.

[David]

Glad to hear that.

[Author]

Posts