Hover Animation

MikeyAcr · ‎04-23-2024

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

TerenceKEANE · ‎04-24-2024

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 · ‎04-24-2024

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 · ‎04-24-2024

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>

★ 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 · ‎04-25-2024

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

Hover Animation

Hover Animation

Community Blog Articles