Change mobile drop down menu background colour

Shopify Discussion
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

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/

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?