Mobile Menu Color Doesn't Match - Need to Change

Store Design

Topic summary

A user encountered a color inconsistency in their mobile hamburger menu, where pink sections didn’t match the purple used throughout the rest of the menu.

Solutions Provided:

  • One contributor suggested adding custom CSS code to the theme.liquid file via the “Edit Code” option, with a screenshot reference for placement
  • Another user recommended adding media query CSS targeting specific menu drawer classes for screens under 480px width

Outcome:

  • The initial solution successfully changed the HOME section color but left the bottom section still pink
  • A subsequent solution from another commenter fully resolved the issue, fixing all pink sections to match the desired purple color
  • The original poster confirmed the problem is now completely resolved and expressed appreciation for the assistance
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

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
Screenshot 2024-02-27 8.46.21 AM.png2256Ă—1504 381 KB

2

Hey @StellarFae ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

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

ThePrimeWeb_0-1709042477282.jpeg
ThePrimeWeb_0-1709042477282.jpeg1253Ă—933 87.9 KB

3

@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;
}
}
1 Like
4

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

5

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. :slightly_smiling_face:

6

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