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

[Mingxi_Li (Max Li)]

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

[Mingxi_Li (Max Li)]

can someone help thanks!

[Pablo_Cortes]

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