Streaming live at 10am (PST)

Mix-Blend-Mode Difference does not work on my Nav Bar

I’ve seen a lot of solutions about the mix-blend-mode:difference, but I couldn’t acheive the same effect. I added the code in a html embed, I tried having the code on parent container, I tried adding background color to white, I tried to check the actual class name in f12 but it still did not work.

Basically I want the texts in my nav bar (the logo, navigation, and language) to invert color based on what is underneath them during the scroll. For clarity I reset all the colored background to transparent just to make the layers easier to see. If anyone can help me check my website I will greatly appreciate!

Here is a screenshot of what im working with:

Thank you very much!


Here is my site Read-Only:
https://preview.webflow.com/preview/maxlidesign?utm_medium=preview_link&utm_source=designer&utm_content=maxlidesign&preview=bcb4033e99e11e659e1ad3fd395b3cf0&workflow=preview

can someone help thanks!

Hello @Mingxi_Li ,

Man you have some awesome work, really cool designs. So you can apply the blend-mode by following this short video Loom | Free Screen & Video Recording Software . The problem that you have is that for blend modes to work they have to be layered on a specific order. Hopefully you can get it done by following the loom video. Let me know if you have any questions. Take care.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.