Scroll interaction breaks navlink hover states - why?

Design help Animations & Interactions
1

So I have a navbar with white nav links.
On scroll the nav links change to blue.
BUT - this scroll interaction removes the hover states on the links - why is this??? Is there a fix? I don’t want to use 2 navbars. I know it will work this way but its bad for the end user when editing the links.

Explainer video…
https://www.loom.com/share/eac1510b4ac24cc282c0c0b49cdbcee5

Here is my public share link: [LINK]1
(how to access public share link)

2

hi @danielcobb hover works on my side.

https://cln.sh/ffxhfB

3

Hey - yeah I’m playing with different solutions.
I’ve removed the hover state from all links and added a hover interaction instead.
It works but as you can see when the text scroll changes to blue - the hover out state goes back to white - which I don’t want.
When hovering on a white link it needs to go back to white
When hovering over a blue one it should go back to blue
Having a hard time figuring out how to do with minimal interactions.
Ignore the nav background for now too - the client wants it transparent scrolling to white

4

Hi @danielcobb if I can ask, why links go dark (blue) on scroll? This make these nav links not visible.Would not be better to keep these white? Just asking as at this moment is not best UX and you should explain it to client.

Another question, you have mentioned that client now asked go with nav background from transparent to white. This make logo text not visible.

So what can I help you with?

5

I’m not concerned with the background - i know its blue right now. I did this for an interaction that I want to change. It will be white on scroll
Don’t worry about any other elements other than the nav links - everything else is going to change.
thanks for looking into this for me

6

HI @danielcobb I have send you video where I trying explain how things works and what can be done.

Hope that will give you an idea how to solve this problem. But It need JS.

7

Thanks for your input here.
Very frustrating that a simple interaction cannot be done inside Webflow.

8

Webflow has a bunk jQuery hook on the nav last time I checked… Try adding behavior to it by adding your own hook. Here’s the signature.

var $ = window.jQuery || null;
	  if ($) {
	  	$(document).on('click', 'a', event => {
	  		// do something w/$(this) as a ref
	  	});
	  }
9

Actually, I think in your case the classes don’t match and that’s why the hover behavior seems to be different. This should be soley related to CSS styling.