Scroll animation blocks hover effect in navigation

Design help General
1

hi webflow lovers

I’m a new webflow designer and having problems with hover effect and setting an animation (while page is scrolling) on the navigation. My goal is to have first a transparent nav (0%) and while scrolling the nav turns to white (2%). Also link colors are changing in this scroll animation from white to grey. Everything is working but scroll animation hides my hover effect which is red.

Does somebody know this topic and knows a simply way to fix it?

2

Yeah, this is a pretty common issue due to the fact you are trying to trigger change within 2 different conditions. What I’d recommend is that instead of trying to use native webflow interactions for both that you create a scenario like this:

  1. Create two different variants of your nav links
  2. First version of link would be just .nav-link
  3. Second version of link would be .nav-link.nav-link-scrolled (You’ll be adding a combo class)
  4. You need to style first version with regular hover color that you want and secondary combo class with hover after style after the scroll color change
  5. Add a div that will serve as a trigger a little under first viewport and write JS code with chatgpt that will add class name .nav-link-scrolled to all elements with class .nav-link if the trigger element goes into viewport

This way you should have total control over both edge cases, you can include the nav background color change in this too

Let me know if you need any further help

3

hi marko. thanks for your help I appreciate that. I tried it with these steps and it is still not working. webflow also highlights in the JS Code a ‘’=‘’ red

must i adjust the animation with the new combo class? Could it also be that the animation is wrong?

4

Do you mind sharing your preview link?