My navbar inverts the colour of my logo when scrolling :S

Hi everyone!

My logo’s colours get inverted when my navbar scrolls down. Can’t bloody figure out how to solve it. Would appreciate any help you can give me - so much!

I’ve added a read only and the live website is here: https://codesk-nl.webflow.io/

For reference, the colour should remain orange.

Thanks a million for anyone willing to help


Here is my site Read-Only: https://preview.webflow.com/preview/codesk-nl?utm_medium=preview_link&utm_source=designer&utm_content=codesk-nl&preview=ef833face947b73a7916d01973bded42&mode=preview

At page level, there’s a While Scrolling trigger interaction. This IX is altering the navbar and its elements. There’s a Filter Action that is inverting (turning into negative) your logo.

@vincent. Legend. I never would have thought to look there.

Last problem though, it seems that when it doesn’t invert, the white text of the logo also doesn’t turn black, and so half the logo dissapears. Is there a way to inject a similarly sized black logo upon moving or a smarter way of doing it?

1 Like

Your logo is an image so there is no way to use, say, text color to change it.

The usual practice is to have different versions of the logo sitting one on top of another in a div, then using IX Hide and Show to hide one when showing the other, and swap. Another practice is to have 2 different version of the whole navbar but it’s more complicated to maintain.

@vincent Thanks Vincent. I can’t quite figure out how to hide these things, only increase opacity, but that isn’t it.

There should be a tutorial on this somewhere but I’m unable to find it (might not know the right search words) - can I ask you please for 30 more secs and please help me to find a tutorial video on this scenario? Hide / show on scroll in the same div block and same location?

Alright man! I’m hacking it. Now instead of appear/hide, i’m using “grow” and that works. However, I don’t want it to show it’s growing but for it to do it instantaneously. Any ideas? You can see my published site. If you scroll back to the top, it does this BLEEP where in 0.5 seconds it grows to the full logo. How can I reduce that grow time to 0?

Set the duration of the action to 0, should be 0.5s by default.

Are you staff? I feel guilty for constantly asking for your time (unless they are paying you for it :wink: ).

I understand that there’s some timer involved, but I can’t find it anywhere in that menu. I’ve been looking.

At all.

I won’t answer if I don’t want to :slight_smile:

You don’t have the duration values because you’re using While Scrolling IX and it’s scroll based, not time based. Also you can have 1 unique IX for everything happening in the navbar.