I’ve seen a couple of threads on this, namely here, here and here, and an incredible site here, but I cannot, for the absolute life of me get it to work on my site.
When the site goes to mobile, the columns stack but the nav bar moves from sitting on a white background to a coloured one. When it does this, I need it to blend (I’m thinking difference or multiply) so it turns white.
I’ve tried embedding the custom code in the links, embedding it in the header, but after five/six hours, I cannot work it out. This is my last resort!
I’m hoping that someone here can help me out, and I’d happily send anyone who is able to couple of cups of coffee for your time.
I included the read-only link above, but yes, that’s it. If you see the ‘About’ and ‘Contact’ links in the nav bar, on the desktop version the text is black as it sits on a white background. When you move to mobile though, the links sit on-top of the image and it’s not that visible so I need them to be white.
Hi @James_Fazzino,
i have a solution for this. It is a little bit complicated and uses the interactions.
I wont use the css filters because they arent currently supported by all the browsers.
Step 1: Change the Font Color to white on mobile.
Step 4: Add a new animation at “when scrolled out of view”, and just add one text color element with your “nav-link difference” class and the color white (not black as the picture shows).
