Solved

Change Mobile Drop Down 2nd Level Menu Background Colour

RK2024
New Member
7 0 0

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;
}

 

 

 

 

Accepted Solutions (2)

Vinsinfo
Shopify Partner
183 61 55

This is an accepted solution.

@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

 

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

View solution in original post

Vinsinfo
Shopify Partner
183 61 55

This is an accepted solution.

@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.

View solution in original post

Replies 9 (9)

zarri
Shopify Partner
39 3 4

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

RK2024
New Member
7 0 0

https://besthair.co.nz/

 

Thanks so much in advance Zarri.

zarri
Shopify Partner
39 3 4

Hi, want to change this blue color?
Screenshot_138.png

 

RK2024
New Member
7 0 0

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

Vinsinfo
Shopify Partner
183 61 55

This is an accepted solution.

@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

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
RK2024
New Member
7 0 0

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

Vinsinfo
Shopify Partner
183 61 55

This is an accepted solution.

@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.

RK2024
New Member
7 0 0

That worked, thanks so much Priyavinsinfo!

RK2024
New Member
7 0 0

That worked, thanks so much @Vinsinfo!