Blend mode Navbar

Hi all,

I’m looking for a way to create the same Navbar as in this example; https://verveagency.com/
When the Navbar goes over other elements (pictures especially) the blending mode changes automatically to (I guess) Difference. In other topics I see you have to do something with Embed and , but I can’t figure it out on my website. When I change (for example) link to Blending Mode Difference nothing happens.

Attached a link to my current website; Webflow - Jochem.studio

Hey @Jochem.studio it looks like you got this working in the end? Do you have any tops on how I can acheive this effect? I have built a portfolio page here but want to add the effect to nav bar when you scroll. Any tips you can share would be appreciated. https://www.rascalfilm.com/ Thanks!

To create a navbar blending effect like Verve Agency in Webflow, set the Blending Mode of the navbar to Difference or Exclusion in the Style Panel under Effects. Ensure the navbar has a transparent or semi-transparent background and is positioned over other elements using absolute or fixed positioning. Test the effect with high-contrast backgrounds beneath the navbar for visibility, and use scroll interactions if you want the effect to change dynamically. Let me know if you need further assistance.

1 Like