Streaming live at 10am (PST)

How to make an Hover effect on the Nav Link Block


#1

Hover States on Nav Link wish list.

Isn't is possible to change the "text" i,e, "Home" to nonEnglish text (ホーム) when you hover around the Nav Link, Nav Button?


#2

Hi!, there are multiple ways to do this in Webflow already. And the CSS :hover property will never bring that feature, because changing the text isn't a CSS prerogative. Rather, you'll achieve the effect with the Hover trigger of the interaction.

There are multiple ways to do that, here's one:

https://v.usetapes.com/VBC5Gpmf7i
https://v.usetapes.com/GrGNGdrOgT


#3

Hi Vincent,

Wow! Thank you very much indeed! It is what I needed.
I will try and put this function on my next project.

Thank you again.


#4

I didn't have time to show you but what could be also cool is that you keep the normal label and make the Mandarin label appear just underneath in smaller in another color. Less motion, more elegance. Also it can maybe save you an interaction... let me try here:

https://v.usetapes.com/j30mmroPxt
https://v.usetapes.com/4dGeU7Be5q

At the end I show how to limit the previous interaction to siblings in order to affect only the item you're hovering. I like the new behavior better... because it doesn't even requires an interaction.


#5

Hi Vincent,

Thank you again.
Well my original plan was multilingual site with Webflow CMS. But since CMS's collection Template can not be made two identical template except text from one link key "name" (one collection can make only template) so, I start think nav bar modification.
My other project which is almost done has this problem and if I wanted I have to make duplicate collection which load a lot of large photo datas and it very heavy (already havy one) slowdown the speed more.
New one will not require such big size photo files but,,,.
Because my almost all of the client need English and Japanese Language on their web site.

Thank you again. I have to try to master this technic.

soomstar


#6