I’m struggling to make use of the CSS function mix-blend-mode in the nav section of my site (linked below). I have attempted to follow tutorials and advice from other Webflow Forums, but have had no success in my particular case. I would like to create an effect as shown on https://petemajari.ch/ - I’ve also shared a screenshot of this effect below:
I believe the issue might lie in the structure of my website, where the nav is a Symbol and the image which I would like to have this effect (top left M type logo in nav) is not directly above a single element. I would like the logo to have this effect on all content below it. I believe this is also made more difficult because I only want this image to exhibit this effect, i.e. I do not want the nav dropdown to have this effect.
Is it possible to only have the logo utilise a mix-blend-mode effect on all of the content shown below it?
Please refer to the below link for a read-only link to my project. Cheers!
Here is my site Read-Only: