Header color switch on scroll

Hello,

I am wondering if there is a way for the header color scheme to switch when scrolling. I would like for it to be the dark theme by default and then switch to the light theme when it becomes stickied.

Looks like I could just use javascript to switch the css class from whb-color-dark to whb-color-light, but I honestly don’t know how to go about that.

Thank you for any help you can provide in this matter.

I came up with this solution. It is not elegant, but appears to work just fine. This, combined with the option to switch from a light to dark logo when it becomes stickied, should work just fine for me.

If this is an option you would consider including in future releases to make it simpler and cleaner, I think that would be wonderful!

body.home .whb-header .item-level-0 > a {
	color: #fff !important;
}
body.home .whb-header.whb-sticked .item-level-0 > a {
	color: #333 !important;
}

Hello,

We shall consider your suggestions and try to add to one of our future updates.

Best Regards

[Author]

Posts