Change Mobile Drop Down 2nd Level Menu Background Colour

Shopify Discussion
1

Hi all, hope someone will be able to help me how to change a background colour of the mobile drop down 2nd level menu. I’ve found the below code to change mobile drop down menu background colour, but it only changes 1st level menu (ie. when you tap the hamburger menu icon) but it doesn’t change the menu colour when I further drill down in menu. I have the Refresh theme. Appreciate any help. Thank you

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

2

Hi, please share the link of your website so I can help you.

3

https://besthair.co.nz/

Thanks so much in advance Zarri.

4

Hi, want to change this blue color?

Screenshot_138.png
Screenshot_138.png481×528 34.1 KB

5

Yes exactly. Replace this blue colour with #201F2B ie. the one that is in the 1st level drop down menu

6

@RK2024 Please replace your code with the below code to change the background color also for the sub menu on mobile view alone. Let me know whether it is helpful for you.

@media only screen and (max-width: 989px){
    div#menu-drawer, .menu-drawer__submenu.has-submenu {
        background: #201F2B;
    }
}

Now, it will look like below image.

priyavinsinfo_0-1709027662838.png
priyavinsinfo_0-1709027662838.png431×469 22 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

7

Thank you Priyavinsinfo, but unfortunately the colour is still blue. I replaced the old css with the one you suggested in base.css and saved, but it didn’t work. Please let me know if you have any other ideas. Thank you

8

@RK2024 Please try placing the code at the bottom of the component-menu-drawer.css file.

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

9

That worked, thanks so much Priyavinsinfo!

10

That worked, thanks so much @Vinsinfo !