How is my navbar changing colour?

I’m playing with the Tuscon template and currently have this: https://the-clarified-company-bab4e5.webflow.io/

The header area does a neat trick where, as you scroll, the logo and links (text and social icons) change colour.

I just can’t seem to figure out how that works.

Thanks in advance for any help.


Here is my public share link: Webflow - The Clarified Company

@gkt - the template uses Scroll into view interactions to accomplish this, for instance on the div block below the hero:

image

You can see there is an interaction for both scrolling into and out of view that is changing the nav color:

image

image

1 Like

Amazing, thanks for the quick reply @sam-g.

I’m trying to replicate the website here as I need to create a template without the e-commerce functionality: https://tcc-826d26.webflow.io/

I can’t seem to get it working correctly, although it looks to me as though I’ve duplicated the interaction set-up.

Here’s the public share link: Webflow - TCC

Really appreciate your help. Thank you.

Wondering if anyone has any thoughts on how this is working?

I’ve got it almost working, but not quite the way it should.

@gkt - can you point out in screenshots specifically what isn’t working correctly?

Yes, thanks again @sam-g.

On the template I’m copying from the header looks like this when the page loads:

And then like this when you scroll down the page:

That’s how I would like it to work on the site I’m copying it over to.

When the page loads, it looks the same. As you scroll though, it doesn’t change:

However, strangely, when you scroll back up the page, it does change:

Again… really appreciate your help on this. Thank you.

@gkt - this is pretty strange to me. For some reason your scroll interaction just isn’t triggering. I just tried deleting the interaction from the div block and adding it back. This seems to have fixed the issue…sometimes there are just bugs in Webflow.

Try just removing it from the element (you don’t need to rebuild the entire interaction itself) and then just add it back.

image

image

image

image

1 Like

Amazing. Works perfectly. Thanks again @sam-g

I’ve had a few “remove, then add back in” moments that have fixed weird things. Trick is trying to remember to try that.