Menu header and logo change on scroll

[MichaelZoz]

I have been chipping away at how to change the menu bar header, logo and text color upon scrolling.
What I want to achieve: 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

I’ve got it 92% figured out with CSS and the Java code I found here in the forums but then read this as a reply to someone else’s post and I feel like it would be a better option for me since i’m using a custom header builder to begin with.

Quote from support specialist: "All that being said, there are certainly some alternatives you can explore to achieve this effect.

1. When you have finished your bar, you can duplicate it, and set the second bar to be sticky and have a delayed reveal. This recreates the general effect minus the transition of the colors all happening inline. This was where we landed at for ourselves as a happy medium without bloating out the product for this one specialized effect."

My question is how to be able to switch between the 2 different scrolling and static menu bars.
a: for home page for sure and maybe for the whole website.

Thanks!

[ruenel]

Hello Michael,

Thanks for writing in! The JS code above may not apply if you are using the Header builder. If your Header builder, create two Bar elements with different logo colors and properties. The first Bar element can display on top of the page while the second Bar element will be the sticky bar and will be hidden when the page is loaded. As soon as someone scrolls the page, the sticky header will then show up at a certain trigger point. All of this will only apply if you are using the Pro theme.

Best Regards.

[MichaelZoz]

ok so you’re saying to create 1 Header with 2 different bars with these settings. That makes sense. I will try it out right meow and if no one here’s back… this is me thanking you in advance

[ruenel]

You are most welcome.