Streaming live at 10am (PST)

Invert color of fixed object

@Sagar_Vijay ok, sorry, my mistake. Effect need apply to parent element (in your case is to: .Nav-Wrapper).

Got it to work now @bro-design. Thanks a ton for your help! :slight_smile:

1 Like

Hi everyone, I’m trying to achieve the same effect for my side-wide navigation bar. I tried using that code snipped but it’s not speaking to the parent element. I’m not sure I’m doing it right. What am I doing wrong?

My situation is that I have a changing background, so I want the navigation links to invert/differentiate based on whatever background is in the view.

https://preview.webflow.com/preview/madd-v6?utm_medium=preview_link&utm_source=designer&utm_content=madd-v6&preview=6b1964856842ba5cb2d610156abf73d9&mode=preview

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:

  1. 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:

image

  1. I’m using Chrome 80 on Windows 10.

  2. 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.

  3. 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. :slight_smile:

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:

  1. 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;}

Reference