Solved

want on hover color change effect same like this website

zikriarathore
Excursionist
78 1 7

hye

i want onhover color change effect on my megamenu same like this website has.here is the website 

https://fujisports.com/ 

when i put cursor on items of mega menu ,on hover red color effect shows. how  can i add this on my website

https://37e364.myshopify.com/

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1187 309 228

This is an accepted solution.

Sorry @zikriarathore,

I forgot to add the tags, please remove the previous and add this

<style>
@media only screen and (min-width: 769px) {
    .header__inline-menu > ul.list-menu.list-menu--inline > li {
        position: relative;
        z-index: 2;
    }
    
    .header__inline-menu > ul.list-menu.list-menu--inline > li a span {
        position: relative;
    }
    
    
    
    .header__inline-menu > ul.list-menu.list-menu--inline > li:before {
        position:absolute;
        content: '';
        display: block;
        background-color: red;
        height: 100%;
        width: 0%;
        transition: width 300ms;
    }
    
    .header__inline-menu > ul.list-menu.list-menu--inline > li:hover:before {
    
        width: 100%;
    } 

}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
1187 309 228

Hey @zikriarathore,

You can try this CSS 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

 

@media only screen and (min-width: 769px) {
    .header__inline-menu > ul.list-menu.list-menu--inline > li {
        position: relative;
        z-index: 2;
    }
    
    .header__inline-menu > ul.list-menu.list-menu--inline > li a span {
        position: relative;
    }
    
    
    
    .header__inline-menu > ul.list-menu.list-menu--inline > li:before {
        position:absolute;
        content: '';
        display: block;
        background-color: red;
        height: 100%;
        width: 0%;
        transition: width 300ms;
    }
    
    .header__inline-menu > ul.list-menu.list-menu--inline > li:hover:before {
    
        width: 100%;
    } 

}

 

 Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706449134586.jpeg

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
zikriarathore
Excursionist
78 1 7

this code is not working it is showing above of my announcement bar when i put this code in theme.liquid

ThePrimeWeb
Shopify Partner
1187 309 228

This is an accepted solution.

Sorry @zikriarathore,

I forgot to add the tags, please remove the previous and add this

<style>
@media only screen and (min-width: 769px) {
    .header__inline-menu > ul.list-menu.list-menu--inline > li {
        position: relative;
        z-index: 2;
    }
    
    .header__inline-menu > ul.list-menu.list-menu--inline > li a span {
        position: relative;
    }
    
    
    
    .header__inline-menu > ul.list-menu.list-menu--inline > li:before {
        position:absolute;
        content: '';
        display: block;
        background-color: red;
        height: 100%;
        width: 0%;
        transition: width 300ms;
    }
    
    .header__inline-menu > ul.list-menu.list-menu--inline > li:hover:before {
    
        width: 100%;
    } 

}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
zikriarathore
Excursionist
78 1 7

thankyou it worked great