This CSS ( No Java script, yay! ) will change the style of your transparent navigation ON SCROLL. I’m using the Renew stack and placing the code in the Global CSS.
With this CSS code you can…
- Invert logo color
- Change menu text color
- Change button text color and it’s hover state
- Change background of sticky header
You’ll need to change the ID’s (e.g. e1173-8) to match the page on your site. ID in Bold [ .x-bar-fixed .e1173-8.x-anchor .x-anchor-text-primary ] OR, if you have the same navigation throughout your site just remove the ID altogether.
If you have multiple ID’s you can do something like this:
.x-bar-fixed .e1173-8.x-anchor .x-anchor-text-primary,
.x-bar-fixed .e234-8.x-anchor .x-anchor-text-primary,
.x-bar-fixed .e412-8.x-anchor .x-anchor-text-primary,
.x-bar-fixed .e414-8.x-anchor .x-anchor-text-primary {
color: rgb(99, 102, 105) ;
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}
There’s a nice use of multi-browser transitions as well so you the header won’t “jump” when changes occur.
Enjoy! 
/*Sticky Bar Color*/
.x-bar.x-bar-top.x-bar-fixed {
background-color: #fff !important;
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}
/*Sticky Menu Color*/
.x-bar-fixed .x-menu > li > .x-anchor .x-anchor-text-primary {
color: rgb(99, 102, 105);
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}
/*Sticky Sign In Button Color*/
.x-bar-fixed .e1173-8.x-anchor .x-anchor-text-primary {
color: rgb(99, 102, 105) ;
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}
/*Sticky Sign In Hover Color*/
.x-bar-fixed a.e1173-8.x-anchor.x-interactive {
border-color: rgb(99, 102, 105) ;
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}
/*Sticky Logo Color*/
.x-bar-fixed a.e1173-3.x-image{
filter: invert(65%);
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}