Mix-blend-mode for nav child image (png/svg)

Hi guys!

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:

image

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:

https://preview.webflow.com/preview/mitchmaking?utm_medium=preview_link&utm_source=designer&utm_content=mitchmaking&preview=2eddd67d401e3f3421f170ff7b024690&workflow=preview