Streaming live at 10am (PST)

Difference blend mode not working

So I’ve been trying to get my logo to invert colors when it is above different elements on my site. Using a ‘difference’ blend mode seemed to be the obvious answer to this. Unfortunately, no matter what I try to do, it just doesn’t work. I’ve tried applying the blend mode to different classes, as well as using custom code to add a mix-blend-mode property. Can someone enlighten me with what I am doing wrong, and how I can get it to work?

Thanks in advance!


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

Change logo to white color - otherwise “difference” blend mode won’t have any effect on black logo. Set “difference” blend mode to “LogoMenu” class and reset color from “transparent” to any you want on “nav” class.

@piotr_k Thanks for the help! I’ve tried implementing the steps you outlined, and while the logo does invert to black when it is at the top of the page, as soon as I scroll down, it goes back to white. This is because my navbar is not a fixed element, and therefore as soon as it exits that area where a solid colored background is set, it no longer has a reference point to invert.

If I set the navbar to “fixed” and with a non-transparent background it obviously results in there being a large bar at the top of my page, which I don’t really want. Is there a way to make the logo’s fill simply respond to the elements behind it, or do blend modes not work like this?

Again, I really appreciate the help!

1 Like

Hi, all I can tell is that there seems to be an issue with hidden menu which is in the navbar.