Solved

Expanse Theme - Mega Manu background color change

saraki
Excursionist
67 1 5

Hello

I would like to change the background color of my mega menu to match the header menu color which is white. Right now it's the color of the general background.

 

My website: www.inibo.co

PW: secret

 

Thanks in advance!
S.

Accepted Solution (1)
websensepro
Shopify Partner
872 117 126

This is an accepted solution.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

 

 

<style>
.megamenu__cols a:hover {
    background-color: white !important;
}
</style>

 

Copy

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 10 (10)

Moeed
Shopify Partner
3535 890 1106

Hey @saraki 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.site-nav__dropdown {
    background: white !important;
}
</style>

RESULT:

Moeed_0-1700131224494.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
saraki
Excursionist
67 1 5

Thank you @Moeed 
It works, but not on the product. Is it possible to make the background on the product white as well? 

saraki
Excursionist
67 1 5

Hi @Moeed 
I just noticed that the mega menu items have a hover color as well as an underline when hovered over. Can this be removed? Thanks so much

websensepro
Shopify Partner
872 117 126

This is an accepted solution.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

 

 

<style>
.megamenu__cols a:hover {
    background-color: white !important;
}
</style>

 

Copy

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
saraki
Excursionist
67 1 5

Thank you @websensepro !!

websensepro
Shopify Partner
872 117 126

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find base.css 

4) Past this code at the bottom of the page

.site-nav__dropdown {
    background-color: var(--colorNav) !important;
}

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
saraki
Excursionist
67 1 5

Thanks @websensepro  but I haven't got base.css

SAN_MSWEB
Shopify Expert
872 110 115

Hi @saraki 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the megamenu.css file:

.site-nav__dropdown {background: #ffeded !important;}

 

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

saraki
Excursionist
67 1 5

Thanks @SAN_MSWEB I don't have megamenu.css either……

 

SAN_MSWEB
Shopify Expert
872 110 115

Okay then you can add this on your bottom of your css file.

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin