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 https://edgardaily.com/.

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?

Thanks,
Thomas


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!