Hover Animation

MikeyAcr
Tourist
24 0 1

Hi, I have a hover animation when you go over a collection in my mega menu. I want this same animation when you hover in the header menu.

 

Website is: https://www.mazushi.com

Replies 4 (4)

TerenceKEANE
Shopify Partner
372 70 61

Hi!

 

The Mega Menu has a dropdown hover animation, but where exactly do you mean by the 'header menu'?

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
MikeyAcr
Tourist
24 0 1

When you hover over CLOTHING in the mega menu there is an animation of an underline. I would like that same animation when you hover over HOME, STORE, COLLECTIONS, OTHER, SUPPORT.

TerenceKEANE
Shopify Partner
372 70 61

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write.

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

<style>


.mega-menu a.link-faded:hover {
    background-size: 100% 1px;
}

.mega-menu a.link-faded {
    background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 0 1px no-repeat;
    transition: background-size .3s ease-in-out;
}
  
</style>

 

shopify.head.jpg

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
MikeyAcr
Tourist
24 0 1

It doesn't make HOME, STORE, COLLECTIONS, OTHER, SUPPORT do the underline animation.