4 AMAZING NAV LINK HOVER ANIMATIONS | Webflow Tutorial 2021

[@simonlampert]

Feel free to ask if you have a question :)

[@curiositytube5924]

I had been searching around for hours for the underline hover animation but all of my effort was in vain. Then I found this video. To the point, simple, no-code solution! I love it! Here, have an extra sub!

[@simonlampert]

That's great to hear! Just keep in mind that you can set interactions to the nav link class instead of adding the animation to every single link one by one - in the interaction settings. That will save you a lot of time.

[@curiositytube5924]

@@simonlampert Thanks for the tip! It really does save a ton of time!

[@tochidioka6019]

@@simonlampert Thank you! I really appreciate😇

[@jeremiask.4295]

Perfect tutorial, highlight on hovered link is what I searched!

[@georgy.design]

Simon, that’s a good tutorial for most people. One note: you applied the interaction to each nav-link while you could just apply the interaction to a nav-link class instead of an element.

[@simonlampert]

Hey Gregory. You are right, clearly. I didn't know that back then and I can't just change the tutorial afterwards sadly. We all keep learning, still think this tutorial will help a lot of people. New video coming soon 👍

[@georgy.design]

@@simonlampert sure, no worries! I like this type of what-you-can-do compilation videos.

[@kennethmarchan9278]

Thanks a lot man! Very easy to understand and to follow. You gain a follower

[@masudkarim112]

thank you for your Tutorial

[@kiyans3313]

thank you so much for making this video and it's super helpful.

[@Duendennis]

Very nice and clear... One tip, if you want to prevent doing the same things multiple times, make a symbol of the Nav link and make overrides for the link and text, so that you can change them. In this way you only have to apply once and if you want to change anything in the future, it will be a breeze :) Greets Dennis

[@simonlampert]

Hey Dennis, thanks for the feedback. I indeed made a mistake in my video: I applied the animations on the nav links individually, instead of applying the interaction to the class of nav links. I wouldn't have the links as a symbol personally, but if it works for you, go for it! Greetings

[@tochidioka6019]

Please I'm finding it difficult to duplicate..... especially in making an override

[@DAPH1918]

Would the easier way to do this be to do the animation once and then copy and paste?

[@simonlampert]

True. But you can do it even faster: If you scroll down in the interactions panel you have the option to apply the animation to the class instead of just this element 👍

[@teresayang777]

Hi Simon, I have a question: after I clicked the link text and went to a different page, the underline animation stoped working. Only when I clicked the same link text again to reload the same page, the animation would work again. Do you know how to troubleshoot this?

[@simonlampert]

Maybe you didn't apply the animation to the link element on the other page.

[@benzpetallar3493]

Hey man! nice video very helpful, by the way where did u get nav text? I can't seem to find them nowhere...

[@simonlampert]

Do you mean the text inside of the links?

[@benzpetallar3493]

@@simonlampert yes

[@simonlampert]

So if you are using the webflow default nav element then there are no text blocks inside the links. You will have to replace your current links with link block elements and you will be able to put text blocks inside of them 👍

[@benzpetallar3493]

Thanks Simon, it helped me a lot... keep posting amazing stuffs man

[@leadgenlegend]

Thanks for this bro

[@tochidioka6019]

Please I'm finding it difficult to reuse an animation for the second tutorials...

[@liefart4139]

hello simon i would like to know how i can make the line stay when the page is selected example when i move from home to contact i want the line to stay when i am on the contact page thank you

[@luiza3181]

that's the same thing I'm dying to know as well 😩

[@olliesaunderson1145]

Super hepful thank you!

[@simonlampert]

Great!

[@chamiko1802]

hi Simon, I followed your tutorial to do the underline nav items animation, but I have an issue like: when I change to preview mode, all of the nav items are undelined as default >.

[@simonlampert]

Hey, if you followed along there normally shouldn't be a problem. So if I got this right it shows a little "point" even before you are hovering over the link. You probably understand that it is rather difficult to help you out 100% on this since I can't see your build. For now I can only ask you to make sure that the underline width is set to 0% or px in the styles and then set the hover animation. But maybe that is not your problem, if the underline is already complete you might be talking about text underline which is a default value for links in Webflow. To fix this make sure to style the HTML link tag - just set the underline there to none or just set underline to none inside the text decoration settings of your link. I don't know if I was able to help you out. As I said, it is a little bit difficult to help you out this way. If you are not able to fix it we can connect on Instagram and I can have a closer look. Cheers!

[@developermsmahadi]

Thanks

[@Duendennis]

Or indeed apply it to a class...