Change Mobile Drop Down 2nd Level Menu Background Colour

Solved

Change Mobile Drop Down 2nd Level Menu Background Colour

RK2024
New Member
14 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
485 165 167

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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Vinsinfo
Shopify Partner
485 165 167

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.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 9 (9)

zarri
Shopify Partner
49 4 4

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

RK2024
New Member
14 0 0

https://besthair.co.nz/

 

Thanks so much in advance Zarri.

zarri
Shopify Partner
49 4 4

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

 

RK2024
New Member
14 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
485 165 167

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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
RK2024
New Member
14 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
485 165 167

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.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
RK2024
New Member
14 0 0

That worked, thanks so much Priyavinsinfo!

RK2024
New Member
14 0 0

That worked, thanks so much @Vinsinfo!