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:
https://preview.webflow.com/preview/daniels-fantastic-project-a4e7dc?preview=0a7b596fca7cf1d83cfac2fcbf22b300

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

2 Likes

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

2 Likes

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?

thanks
John

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
https://preview.webflow.com/preview/jean-323e0b?utm_medium=preview_link&utm_source=dashboard&utm_content=jean-323e0b&preview=86d2547be7a68546d9e5fcc2fc670666&mode=preview

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
John