How to use blend mode difference on a sticky header

How To
1

I want to use mixed blend mode: difference on a sticky header. problem is, the moment I turn the header into position fixed / turn the sticky header option on, it stops interacting with the rest of the homepage. Anyone know, how to solve this?

link to demo site:

thanks in advance🙏🏼

2

[solved]

The mixed-blend-mode has to be applied to the lowest container (which is not visible inside the builder)

In this case, I had to set this custom rule:

#brx-header.sticky.scrolling {
mix-blend-mode: difference;
}

Shoutout to Matt Hias from the Bricks FB group :heart:

1 Like