Streaming live at 10am (PST)

Underline animation when hover over navbar links


#1

I am trying to make a line animation under my navbar links when hovering over.

Something like this:

I am not an expert in coding, but I have been looking up css codes and tried embedding them into my website but I just can’t seem to get it right.

Here is my site:
https://preview.webflow.com/preview/daniels-fantastic-project-a4e7dc?preview=0a7b596fca7cf1d83cfac2fcbf22b300


#2

Hi @DanielY

Welcome to the Webflow Community!

Good news is that you definitely don’t need code to do this, Webflow has this covered with interactions.

You can wrap your navlinks in a div, with another div centered to the bottom to make a line… add a hover interaction in and out.

Here is a sample. Let me know if you’ve managed to figure this out or not and if not, I’ll make a quick video to show you how to do this…

CloudApp


#3

Also - a similar clone-able idea here from @Aaron


#4

Oh yeah, even better! Nice find @StuM


#5

Thank you guys! It’s working now :smile:


#6

How did you make the line start animating from the center?


#7

Use can use the centre element tool, or use the parent container to centre the element. It will then appear from the middle.


#8

Thanks, I figured it out. I was increasing the Size to show the line instead of Scaling the line. When I scaled it within a centered parent container, it worked.