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?
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?
I also had the same problem, when I added the difference blend mode to my nav bar logo (which is just text) and it was not reacting to the other colors and content on the website. I later discovered the problem was that the z-index was set on auto.
The logo was never on top of the content for the difference blend mode to work. I changed the z-index to 1000 and it worked.