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.

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 907

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
6736 1820 2202

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
740 143 150

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

 

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

View solution in original post

Replies 12 (12)

Moeed
Shopify Partner
6736 1820 2202

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 907

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
6736 1820 2202

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
2391 516 514

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
2391 516 514

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 907

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 907

@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
740 143 150

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

 

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages