Solved

Mobile Menu Color Doesn't Match - Need to Change

StellarFae
Excursionist
33 0 7

Hi!,

I noticed my mobile hamburger menu color is mixed colors. I would like to change the pink color to match the purple in the rest of the menu?

Any suggestions for how I could do this?

 

Any help is greatly appreciated!

Thanks

 

Screenshot 2024-02-27 8.46.21 AM.png

Accepted Solution (1)
LuffyOnePiece
Shopify Partner
293 53 51

This is an accepted solution.

@ThePrimeWeb  Try adding below css to your css file.

@media screen and (max-width: 480px){
.menu-drawer__menu-item--active, 
.menu-drawer__menu-item:focus, 
.menu-drawer__close-button:focus, 
.menu-drawer__menu-item:hover, 
.menu-drawer__close-button:hover,
.menu-drawer__utility-links{
    background-color: rgb(222, 210, 241) !important;
}
}
Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
1724 478 353

Hey @StellarFae,

 

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.

 

 

 

 

<style>
@media screen and (max-width: 480px) {
  .menu-drawer__menu-item--active, 
  .menu-drawer__menu-item:focus, 
  .menu-drawer__close-button:focus, 
  .menu-drawer__menu-item:hover, 
  .menu-drawer__close-button:hover,
  .menu-drawer__utility-links{
      background-color: rgb(222, 210, 241) !important;
  }
}
</style>

 

 

 

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

ThePrimeWeb_0-1709042477282.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
LuffyOnePiece
Shopify Partner
293 53 51

This is an accepted solution.

@ThePrimeWeb  Try adding below css to your css file.

@media screen and (max-width: 480px){
.menu-drawer__menu-item--active, 
.menu-drawer__menu-item:focus, 
.menu-drawer__close-button:focus, 
.menu-drawer__menu-item:hover, 
.menu-drawer__close-button:hover,
.menu-drawer__utility-links{
    background-color: rgb(222, 210, 241) !important;
}
}
Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
StellarFae
Excursionist
33 0 7

Thank you! This worked to change both of the sections that were pink.

StellarFae
Excursionist
33 0 7

Thank you for your help! This did change the HOME section to the correct color but did not change the bottom section that was also pink. Someone else also commented with a solution that worked so it's all fixed now. I appreciate you taking the time to look at it and help me. 🙂

ThePrimeWeb
Shopify Partner
1724 478 353

Well it's literally the same code, but whatever works haha.

Was I helpful?

Buy me a coffee

🙂

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