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
511 86 78

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!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
511 86 78

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!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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.