Streaming live at 10am (PST)

Underline animation when hover over navbar links


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:


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…



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


Oh yeah, even better! Nice find @StuM


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


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


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


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.