Change navigation bar colour to match background div

Hi there,

I was wondering if someone can help me out creating a navigation bar that changes colour corresponding to the colour of the page block thats behind it, just like over at

I have been looking at multiple help center articles, but none explain it in a easy way.
And I was curious if it is possible to do with the new interactions options.

Can anybody help me out, or point me in the right direction?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Thomas,

You can do that with one long ‘while scrolling’ interaction or with multiple ‘scroll into view’ interactions.
Here you go:

Hi Aviv, Thank you SO much, it works beautifully!
I have been trying to fix this for hours, but this is a very elegant solution, great!

1 Like

Hello! Thanks for posting this and making it available. When I edit in the designer, or clone the project and publish, the effect is not working for me. Also, I do not see any interactions applied to any of the elements. Am I missing something? Please advise.

1 Like

There’s a “when page is scrolling” interaction applied to the navbar. If you clone the project you should see it.

Thanks - I did clone it, but I guess the page trigger got cleared. I had to go back and add it, but it was in there and worked once I added it back. Thanks!