Streaming live at 10am (PST)

Changing navigation bar text color on scroll?

Hi!
Here’s my plan. I am making a sticky navigation bar with a see through background so only the text will be visible. Different sections of my homepage will have different colors. So I would like the nav bar text colors to change (for contrasts sake) when the new section is in full view. How do I create that?

So basically, Hero section is dark, so I want the text to be white… then as you scroll down and the sticky navbar crosses over to the new section with is light colored I need the text to change to a dark color. Hope it makes sense and it feels like it should be so hard… but I’m new at this.

Thank you for reading and hopefully you can help explain this to me.

/Daniel

Hi Daniel,

You can create that with the “scroll into view” interaction.
It would be triggered by the different sections, and will affect the nav text color.

https://preview.webflow.com/preview/lifechurch?utm_medium=preview_link&utm_source=dashboard&utm_content=lifechurch&preview=f9d01cd5f9caa990340d2cc414ad9200&mode=preview

Here is the link. I still don’t understand how to get the text to change color when it enters the new section. So the trigger is the section, but what is effected is the text color in the nav bar. Appreciate your help man!

Ok, I have taken a look and realized that triggering by sections might cause some problems. It would be best to add a trigger element to each OTHER section at the bottom of it and adding an offset in relation to the section height.
The trigger will activate an interaction that changes the text color of all the .Nav Link class.

I’m sorry but I don’t understand that explanation… I’m pretty new at all this. As far as I understand, I pick and element and than click on Interactions… in there I have only managed to find how to do changes to that element or class, but I can’t find how to pick certain things to trigger that change.

I figured it out! thanks so much man!

1 Like

I went away for a moment to create this:
https://change-navbar-text-color-by-section.webflow.io/

https://preview.webflow.com/preview/change-navbar-text-color-by-section?utm_medium=preview_link&utm_source=dashboard&utm_content=change-navbar-text-color-by-section&preview=73772a340ab4c22b08331e14f8a96539&mode=preview

Still some work on offsets etc’ :sweat_smile:

That was an even better solution than what I managed to do. Thanks!

Hello Daniel,

To add to avivtech’s solution…

You can prevent the dark text from disappearing to soon before the the dark background enters by adding a little delay to the “Start” point “After Previous Action”.

webf