@Sagar_Vijay ok, sorry, my mistake. Effect need apply to parent element (in your case is to: .Nav-Wrapper).
This is late, but this thread is quite high in the Google Search Results, so I thought Iād reply:
Because Webflow hasnāt ever added this feature, there are a lot of pitfalls: Webflow classes are sometimes automatically renamed and will not match the Designer. This, obviously, ruins any kind of custom code. Using F12 Developer tools, get the actual class name.
In Designer, the class is .w-heading:
But, using .w-heading will NOT work. Why? Because Webflowās class naming is a little screwy. For some unholy reason, Webflow renamed .w-heading to ._w-heading. Maybe it had a reason, but surely that should be communicated in the Designer.
Wasted 25 minutes until I noticed the _ there.
The now working code inside the pageās <head>:
<style>
.white-black-element {mix-blend-mode: difference;}
._w-heading {mix-blend-mode: difference;}
</style>
It works now:
Note:
- I am not using any parent or wrapper div. Iām not sure why that was needed. All the custom CSS is directly targeting the H1 header & circle (circle is named
.white-black-element), which are direct children of the body. No wrappers:
-
Iām using Chrome 80 on Windows 10.
-
By using the pageās custom code section, instead of the HTML element embed, the effect wonāt show up in the Designer. It only appears on the published page.
-
In the end, itās like so: a) verify the correct classādo NOT trust the Webflow Designer, b) ensure the CSS is correct with the . & semicolon & brackets, etc. c) target the element directly.
3 Likes
Hi I tried following some of the advice in this thread but I canāt seem to get the difference or exclusion blend mode for the oversized logo on my site: bloomfield.works
Any help?
Thanks!
To add to this:
I tried making this work on a simple white background / black type website. When publishing, all the type that was spoken to by the custom code disappeared, that is, became white.
In order to solve this, simply change the text colour to white. The text will disappear (white type on white background) in designer but will appear black on the published site and behave as expected on scroll.
Hope this helps if someone runs into a similar issue. 
Going to try and get this to work, a la www.oma.euā¦
My site www.philwilson.ca
First attempt at pasting in that style code in on my home page and changing out my class āNav3-Linkā doesnāt seem to work ā¦ I put ā._Nav3-Linkā as per the instructions?
Could have been because of the iframe content not being recognized?
I tried on this page and still nothingā¦
https://www.philwilson.ca/work/updating-library
Note:
- I am not using any parent or wrapper div. Iām not sure why that was needed. All the custom CSS is directly targeting the H1 header & circle (circle is named
.white-black-element), which are direct children of the body. No wrappers:
What if I AM using parent ā¦ how would this change the code. Would it not work? I want to use this code for my main navigation that is a āsymbolā used through out my entire pageā¦
Would be required to invert on this page
I tried
._simple-navigation {mix-blend-mode: difference;}
Hey:), the link is not working and I have the same question. Can you please resend it?:))
@TG2 Hi there, trying also to get this to work, with no success so far! No idea what Iām missing? Iāve tried targeting the circle called logo-round directly, tried targeting the parent being the nav-barā¦ What am I missing? Iād like the whole nav bar (the icon and the nav items) to have the difference blend on themā¦
Thank you so much for your help in advanced!!
Hi again, I have figured out how to make the items in a parent wrapper invert. However my Parent wrapper is the Nav Bar, so when I open the menu in tablet-mobile view, the whole nav bar is difference filtered - so there is no solid background for the nav menu being opened. I canāt manage to wrap the blend filter around anything other than the main parent sectionā¦ Cans omeone please advise how I can make just the Logo, and Nav items difference, but the actual nav bar parent have a normal background?
Here is the project I am talking about -