Mobile Menu Color Doesn't Match - Need to Change

StellarFae · ‎02-27-2024

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

LuffyOnePiece · ‎02-27-2024

@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

ThePrimeWeb · ‎02-27-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

LuffyOnePiece · ‎02-27-2024

@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 · ‎02-27-2024

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

StellarFae · ‎02-27-2024

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 · ‎02-27-2024

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
Check out our interview with Shopify!

Mobile Menu Color Doesn't Match - Need to Change