Navbar correctly chaning color between sections, but I can't apply hover state effects on the links

Hi everyone!

I’m trying to create a navbar that inverts colors depending on the section it is on.

This is a perfect example of what I’m trying to do: About us | Pitch
On the blue BG the navbar is blue, and when the BG is white the navbar is also white and all the content on it inverts colors.

I’ve managed to do this :smirk: BUT I can’t apply hover state effects on my classes after the color changes… Because the new color I set overrides the old class that had hover state applied. So if my navbar is on the default color the hovering effect works, but after my interaction does it job and all the color changes I can’t set the new hover state color. And no hover animation happens.

Any workaround on this? The perfect thing for me would be if the interaction could change the class of my link. This way I create 2 classes, one for each background and with inverted hover states, and with my interaction I toggle around them. But from my research this is not possible…

Any ideas?

Thanks a lot

What you want to achieve is definitely possible. What I would do is make the scroll interaction so it changes the text color of the parent class, and then add the hover interaction to the text class itself. That way there shouldn’t be a conflict.

If that doesn’t work you could make it so instead of the scroll interaction changing the color, it actually unhides a duplicate navbar which is a different color. Then there will be no conflict because there’s no color change happening on scroll.

Hi Mark! Thanks for your answers I liked both solutions.

#1 seems great and the best solution yet. The problem is I would still have 1 hover effect class. This way I could change the color of the text without interfering in the hover, but I could not have 2 different hover effects. Or am I missing something?

#2 looks like a great option for me! Do you think it would compromise site performance, like loading time, or is it ok to duplicate and hide stuff? I’m also not sure how I would duplicate and hide it, could you explain this?

Thanks :raised_hands:

Maybe I’m not fully understanding what you are trying to do. What type of hover effects are you trying to apply and what type of elements do you want them applied to?

If the only hover effect is changing the text color or something simple like that, it will be easier to use the States dropdown instead of manually creating a new hover interaction.

I want simple hover effects like color change on elements like text links and buttons. But since I’m inverting all my colors depending on the BG the navbar is on, I also have 2 different hover colors I need.

That’s why I said in the first post that best case scenario would be to change classes with the navbar interaction. This way I could have two classes like navbar-link-light and navbar-link-dark each one with a different color for the hover state and switch between them.

Ok got you. I think option #2 would be your best bet then. That way your duplicate navbar can have different classes. I’ve never heard of interactions triggering a change of classes, and I doubt that’s possible without getting deep into custom code.

The way this would work would be as follows:

On your scroll interaction set one navbar to display for your first color BG. On the same scroll interaction, when you reach your different BG, instead of inverting the color of the first navbar, you will hide that navbar, and display your duplicate navbar, so the classes are now different. Then if you have another instance of your first BG color, when you scroll to it, hide navbar 2 and unhide navbar 1. Etc etc.

If your navbar is pretty straightforward and simple then I doubt having a duplicate like this will impact too much on load times. You can always test both versions on something like GTMetrix if you are concerned about that.

By the way feel free to share a read-only link so I can take a closer look. Might be an easier solution but without seeing the project it’s difficult to picture exactly what you have done so far.

That did it!

Sorry for the time to answers this, I was busy and wanted to really test it. It worked :raised_hands:

I’m just having a little trouble making the transition smooth, for some reason, the hide/show interaction can’t have ease in/out, but I’ll figure it out.

Thanks a lot!

1 Like

Glad that worked for you. To make the animation smoother, just animate the opacity to fade to 0% before it hides. That way you can set whatever duration you like.

Yeah, I got it. Here’s the final result: https://www.alymente.com.br/

Thanks :slight_smile: