Fixed Nav Interaction disables hover states

Hey,

I’ve currently got my site set up so that the fixed nav appears to change colours when you scroll on to a different coloured background. My issue is that when the navigation fades to the new colour, I can no longer activate the hover states on the nav that’s revealed.

I’ve done this by:
Duplicating my nav and creating a dark and light version of each element.
I’ve placed the interaction on the dark container and targeted each specific class (as well as adjusted the timing for each).
The interaction is an opacity change.

I realize this wouldn’t hide the actual elements, so I also added a show/hide interaction to the top nav links for now (not the social icons or back to top button).

As you can see, you can’t hover over any of the text links or buttons.

Any solutions would be welcome!


Here is my public share link: https://preview.webflow.com/preview/novus-physiotherapy?utm_medium=preview_link&utm_source=designer&utm_content=novus-physiotherapy&preview=c526ae93817adb91dee6a84c99a35a3e&pageId=60a6c31ad6c4a9945f778e1f&workflow=preview
(how to access public share link)

Still looking for some help here!

My guess is that because I have it set to fixed and covering the whole screen on the top Zindex I can’t click any CTA below it.