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:

1 Like

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.

1 Like

Hi Mark,

What about this variation?


Hey @j6776 :wave:

That looks the same as what is detailed above, except in this case there is no margin underneath the navigation buttons. Let me know if you have any difficulty getting this to work.

If you have anything so far, then feel free to share your read only link so we can a look for you :slight_smile:

Hi Mark,

Thanks for getting back to me

I followed a tuto on ytube but it seems that the version has changed since the video has been done.
My trigger is correct but the animation is wrong. I assume that it is because it is not the right element that is selected

I was wondering if anyone has any tips for making it so that the hover animations won’t run on the ‘current’ state. I would like to keep the underline there when someone is on the current page and not have the animation run when they hover over the link while on that page.

I have the exact same question. Bump!

I’m not sure it’s possible to do natively, e.g. using Webflow Interactions. You can create the underline on hover animation, but to create one with non-hover on “current state” seems to be possible only by using custom code.