Change mobile drop down menu background colour

Shopify Discussion

Topic summary

A user successfully changed their desktop dropdown menu background color but needed help applying the same change to the mobile version.

Solution provided:

  • Navigate to Shopify admin → Online Store → Themes → Edit code
  • Locate the CSS file in the Assets folder (base.css, style.css, or theme.css)
  • Add media query code targeting mobile screens (max-width: 989px) with the desired background color for #menu-drawer
  • The fix required adding !important to the background color property to work properly

Outcome:
The initial solution successfully changed the mobile dropdown menu background color for collections.

Outstanding issues:

  • The cart dropdown background color remains unchanged and needs a separate fix
  • Another user asks how to change the second-level dropdown menu background color in the Refresh theme

Both follow-up questions remain unanswered in the thread.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I used the below code to change the colour of my dropdown menu on desktop, however it didn’t change the mobile version. Does anyone know how to change mobile version or code that does both?

Thanks

1 Like
2

Hi @MALIKO

Would you mind to share your Store URL website? with password if its protected. Thanks!

3

Hello!
It’s www.malkko.co.uk

Thanks!

4

Im sorry I cant reach your store, please check the URL again. Thanks!

5

https://maliko.co.uk/

1 Like
6

Got it, Thanks! Try this one then.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 989px){
div#menu-drawer {
    background: #E8E3D9;
}
}
7

Hi @MALIKO , welcome to the Shopify Community.

I wanted to share some resources with you that can help you with your theme customization needs. I’m not sure what theme you’re using, but all Shopify made themes come with 1 free hour of theme changes, you can read more about that here. For 3rd party themes they do not do this kind of customization, but you can connect with a Shopify Expert to make those changes for you.

Another great resource besides the Shopify Community, is the Shopify Partners and Developers Forum. You will find more people in that forum that are developers and partners and have more experience with coding. Always a great place to reach out to.

8

Thank you for the information. This a bit weird im sure that I already comment on this section.

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width:989px){
div#menu-drawer {
    background: white;
}
}
9

Hey,

I tried - doesn’t work on base.css. I also don’t have a theme.css or style.css?

10

Oh, okay. Would you mind to used this one.

Same Instruction.

@media only screen and (max-width: 989px){
div#menu-drawer {
    background: #E8E3D9 !important;
}
}

Thanks!

11

This one worked! Thanks :slightly_smiling_face:

12

Hey, this worked for the dropdown menu under for collections, but it hasnt changed the dropdown background for the cart.. Please can you advise how I can make it the same colour here? Thanks!

13

Hi Made4uo-Ribe, your solution worked, thanks so much. But for the first level mobile drop down menu. Do you know how to change background colour of the 2 level drop down menu, Refresh theme?