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: