Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: How to change menu drawer color?

Solved

How to change menu drawer color?

mindstars
Tourist
5 0 3

I have been trying to change the color of my menu drawer for the mobile view but nothing seems to be working??? Any help please.. I want it to be transparent, or to be white.

Screenshot 2024-08-28 at 3.34.29 AM.png

Accepted Solutions (3)

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @mindstars

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

 

<style>
div#menu-drawer {
    background-color: transparent !important;
}
</style>

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Moeed
Shopify Partner
6326 1715 2069

This is an accepted solution.

Hey @mindstars 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
div#menu-drawer {
    background: transparent !important;
}
</style>

RESULT:

Moeed_0-1724830822969.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Rahul_dhiman
Shopify Partner
658 128 134

This is an accepted solution.

Hello @mindstars 

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-menu-drawer.css
add this code at the end of the file.

.menu-drawer__navigation-container {
background: cornflowerblue !important;
}

result
17.png

If this was helpful, hit the like button and accept the solution.
Thanks

 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

View solution in original post

Replies 12 (12)

Moeed
Shopify Partner
6326 1715 2069

Hey @mindstars 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


mindstars
Tourist
5 0 3

BSSCommerce-HDL
Shopify Partner
2305 834 908

Hi @mindstars, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Moeed
Shopify Partner
6326 1715 2069

This is an accepted solution.

Hey @mindstars 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
div#menu-drawer {
    background: transparent !important;
}
</style>

RESULT:

Moeed_0-1724830822969.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


niraj_patel
Shopify Partner
2378 514 507

Hello @mindstars 
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
mindstars
Tourist
5 0 3

mindstarsapparel.com

niraj_patel
Shopify Partner
2378 514 507

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  div#menu-drawer {
      background: transparent !important;
   }
</style>

niraj_patel_0-1724830926287.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

BSSCommerce-HDL
Shopify Partner
2305 834 908

This is an accepted solution.

Hi @mindstars

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

 

<style>
div#menu-drawer {
    background-color: transparent !important;
}
</style>

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

mindstars
Tourist
5 0 3

Thank you!! Have a good day!

BSSCommerce-HDL
Shopify Partner
2305 834 908

@mindstars, No problem. Glad to help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Rahul_dhiman
Shopify Partner
658 128 134

This is an accepted solution.

Hello @mindstars 

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-menu-drawer.css
add this code at the end of the file.

.menu-drawer__navigation-container {
background: cornflowerblue !important;
}

result
17.png

If this was helpful, hit the like button and accept the solution.
Thanks

 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167