How to animate underline line on hover effect on header and mega menu

Store Design
, , ,
1

How do i add an animated, smooth underline effect on hover to menu items (both header and items in mega menu) like in the website https://www.jacquemus.com/

When you put your cursor on top of the header items in that website, it has a smooth underline animation from left to right, and when you put your cursor out of it, there is a smooth underline animation from right to left. I would to like to do exactly that!

My store is volga.cc

And store password is volga

Thank you so much for any help!

2

Hi @gabenardini

You can add animation for top menu by adding this CSS code to your base.css file

.mega-menu__content {
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s !important;
}
3

Hi!

That is not quite what I want… I want to animate the UNDERLINE that appears under the menu titles in the header and in the megamenu content when hovered over. Currently, in my website, when I hover over these words, I made it so that they get underlined. But I want to edit the way this underline appears, instead of just immediately underlining everything as soon as you hover, I want to make it so it smoothly draws a line from left to right under the word, and when you stop hovering over, it smoothly draws a line back from right to left. Just like in the website I posted!

Could you help me with that?

1 Like
4

I want to see the same thing happen, I tried this solution too on my website, it is not what is expected as per request.
Could someone please help us out on this matter? Thank you in advance.

5

Try this code:

.header__menu-item span {
  text-decoration: unset !important;
  position: relative;
}

.header__menu-item span::after {
  content: "";
  height: 2px;
  width: 0;
  background-color: currentColor;
  position: absolute;
  bottom: -8px;
  left: 0;
  transition: width 0.5s ease-in-out; /* Use ease-in-out for a smoother transition */
}

.header__menu-item:hover span::after {
  width: 100%;
  transition: width 0.5s ease-in-out;
}
2 Likes