Blending mode to Difference problem - help needed

Design help Layout & Design
1

Hello to the Webflow community,

I’ve set my nav bar and my footer to blending mode : difference but it’s actually not working, I’ve no idea why. Do you know how I could solve the issue? I’ve been trying to find a solution for an hour and I can’t figure it out :frowning:

Thanks a lot for your help,
Best
Manon

Here is my site Read-Only: [LINK][1]
https://preview.webflow.com/preview/manons-trendy-site-a0b058?utm_medium=preview_link&utm_source=dashboard&utm_content=manons-trendy-site-a0b058&preview=85ecb849e48c984b967db813363d7d01&workflow=preview

2

Both of these elements need to have a z-index that’s higher in the stacking order. This work for me when manipulating the footer. I was having trouble with the main nav because of a class issue where you’re repeating a class that’s in the footer causing a conflict. I’d give those elements a unique class name.

3

Thanks a lot for your answer @Port_of_Folio :pray:

I’ve done everything you mentionned and it’s only working on the nav. Do you know why the footer is having trouble displaying the difference blend mode?
Here are the names of the two new different classes : Link footer new and link nav new
Nav et footer elements are set to : Z index 10

Thanks again

https://manons-trendy-site-a0b058.webflow.io