How To Add An Underline Animation When Hovering Over Header Menu Items?

Shopify Discussion
1

Hello! I want the underline in my header to be animated like the one on this site:

https://sageandsill.com

My store is: https://kitchencrafted.shop

Thank you in advance!

2

This requires a bit of css, the way that it works is that on hover, there is a pseudo element that get’s animated. If you inspect the dev tools site, you will see in the html :after, this is the pseudo element that I am referring to. If you go to the link (the tag) you can force a hover state and then you can look at the styles.

You have to right click on where the yellow dot is and that is where you can select ‘force-state’

Screen Shot 2023-04-03 at 12.39.06.png
3

Hello @kitchencrafted
Its Artzen Technologies! We will be happy to help you today.

For the desired result which you are seeking, you have to add the following css. The following CSS will make the menu links same as the one you are desiring on hover.

.header__menu-item:hover span{
	text-decoration: none !important;
}

.header__menu-item span {
  display: inline-block;
  position: relative;
  color: white;
}

.header__menu-item span span::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.header__menu-item span:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

This CSS will help you achieve the desired result. Please mark the solution as accepted if it helped you

Let me know if need further assistance
Regards,
Artzen Technologies

4 
.header__menu-item:hover span{
	text-decoration: none !important;
}

.header__menu-item span {
  display: inline-block;
  position: relative;
  color: white;
}

.header__menu-item span span::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.header__menu-item span:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

This CSS will help you achieve the desired result. Please mark the solution as accepted if it helped you

Let me know if need further assistance
Regards,
Artzen Technologies

It works but when I try to save it, it says: “Online Store editor session can’t be published”

5

Add this code in your css file. This will definitely work

6

It doesn’t, there’s no animation showing up

7

Which one you’ve tried?

8

The code you sent earlier was working but it was saying: “Online Store editor session can’t be published” , now I used the other developer’s code and it is not.. I can’t seem to find the one you sent

9

Try now it may not show that error again.

.header__menu-item:hover span{
	text-decoration: none !important;
}

.header__menu-item span{
  display: inline-block;
  position: relative;
}

.header__menu-item span::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.header__menu-item span:hover::after {
  text-decoration: none !important;
  transform: scaleX(1);
  transform-origin: bottom left;
}
10

Thanks! It worked

1 Like
11

Hey where do you put the code? base.css? Not working for me using the dawn theme