Change Navbar elements on scroll

Ok, so, changing background color should be pretty easy, although I haven’t been able to make it work, I’m sure I will eventually. The problem is that I need to change color from black to yellow, which means that the logo, the text and the button on the navbar also needs to change. For the life of me I can’t find a tutorial that explains how to do that accurately. The ones out there simply don’t work and none of them points to how to change the logo, since it would need to be replaced by another image.

For reference this is the above the fold state:

And this should be the below the fold state:

The closest I got to making it work was by using the “filter” animation, inverting the colors of the elements, but it looks horrible.

Please help! :slight_smile:

Here is my public share link: [LINK](Webflow - Parcha)
(how to access public share link)

Bump up! Wonder if anyone can help with this matter. Thanks!

Facing the same design problem, were you able to figure this out?

One way to achieve this would be to create a div that is absolute to the body top. Now you set an scroll in/out of view animation to this div that adjust the navbar!

Now to change the navbar logo color, instead of uploading as an image, upload as an embed and change the fill to “currentColor”. This makes it so that the SVG gets the parent font color (Which we can adjust with the animation)

For example:

<path d="M114.963 24.9081L122.707 16.5837H115.504C115.144 16.5837" fill="currentColor"/>

Thank you for the reply but I am a complete webflow newbie and I dont understand where this code should go. How do you upload as an embed?

I completely understand the challenge you’re facing with changing the colour of the navbar background, text, and logo. I’m glad you reached out, and I’m excited to help you out! I went ahead and created a video tutorial specifically addressing your issue

You can check out the video tutorial I created just for you by following this link: Change Navbar elements on scroll - Webflow on Vimeo

I’ve designed the tutorial to be clear and easy to follow, so I’m confident it will make the process much smoother for you. If you have any further questions or if there’s anything else you’d like to explore, please don’t hesitate to reach out. I’m here to support you every step of the way!

1 Like

I just tried this and it works. I am so grateful. Thanks! :pray:

1 Like