Streaming live at 10am (PST)

Add isolation property to cart container


I’m trying to add in the isolation property to stop my cart container applying mix-blend-mode (it’s a child of my menu div which contains images and text that need to have the mix-blend-mode). I can’t seem to get it to work…

I don’t have much coding knowledge so I’m probably missing something basic!

Here is my public share link:

Sorry for the bump but I’m really stuck with this and hoping someone could help me! Thank you :slight_smile:

I’ve attached an image that shows exactly what I’m trying to achieve. I know this isn’t a Webflow question it’s more a CSS question but I would really appreciate anyone who might know if this is possible and if so how to do it. Or if it’s just impossible and I have to find a work around.

Thank you!!

Screen Shot 2020-09-12 at 08.37.53|312x500

Okay I’ve figured out that I wasn’t using id=“e” as it explains here.

But it’s still not working.

Here is my code:

html, body {
max-width: 100%;
overflow-x: hidden;
.c-menu-l {
  mix-blend-mode: exclusion;
.c-menu-r {
  mix-blend-mode: exclusion;
.d-cursor-wrapper {
  mix-blend-mode: exclusion;
.d-preloader {
  mix-blend-mode: multiply;
#e {
  isolation: isolate;

And I applied the ID ‘e’ to ever single element inside Cart Wrapper.

Is the issue perhaps that Cart Wrapper is not a direct child of the element that has mix-blend-mode applied? Does isolation property only work on a direct child, not a 4th level child?

I am absolutely desperate to solve this. I am happy to pay someone to help me figure this out as I have a very adamant client who does not want a work-around for this.

Just in case this is helpful for anyone else, I found a solution via a work around. It’s probably not very clean, but it works perfectly for me and it was pretty simple.

I just created a “fake” cart icon that sits in my menu (which has mix-blend-mode applied). And because my menu is fixed to the RHS of the screen, I was also able to position the real cart in the same area underneath the “fake” cart in a separate div (which DOESN’T have mix-blend-mode applied). Then I added in pointer-events = none on the “fake” cart so that when you click on it, you’re really clicking on the real cart underneath which brings up the cart pop-up without any mix-blend-mode applied.