Streaming live at 10am (PST)

Best way create a nav item image hover


#1

I'm trying to create a nav bar hover image.

I've tried the hover state with the image, but when I adjust the image (size or placement) when setting up the hover, the image moves upon hover. I've also tried an interaction to a different element (the highlight) and that doesn't seem to work well either, given that this is a nav element.

I want the blue highlight to fade in on hover and then fade out when the mouse moves away.

Any thoughts here on best practice?

Much thanks.


#2

Can you share your public link? It's not a very difficult thing to do, it should work. Simply put a background image in hover and change the font color.


#3

I've done that, however, when I place the image in, I have to adjust it somewhat to place it correctly. Then when I go and hover over the text, it behaves as expected, except that the hover "moves"...see link: https://webflow.com/design/rocket21?preview=c9a528c8bb9856fdc2d40521c58f4a46

Thanks!


#4

It moves because you have this:

Transition on ALL for 500ms, both on your normal and hover state. Remove it and it doesn't move anymore. Then you need to adjust the size of the menu items for it to look better.


#5

Thank you. Ug...just missed this.


#6