Solved

How can I change the dropdown menu background to white on mobile view?

coolerdrinks
Excursionist
18 0 2

Hi there! 

 

I recently got custom code for my drop-down menu to make the background white rather than transparent. However, it does not extend to my mobile view, only my desktop view. Can someone recommend the process on the custom code to make my dropdown menu background white? 

 

My store is: https://cooler-drinks.myshopify.com/

PW: steeck

 

Thank you so much!

Accepted Solution (1)

SAN_MSWEB
Shopify Expert
1135 135 141

This is an accepted solution.

Hi @coolerdrinks 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
#menu-drawer {background-color: #ffff !important;}




Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

View solution in original post

Replies 6 (6)

EBOOST
Shopify Partner
987 265 305

Hi @coolerdrinks 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png


2. Assets/component-menu-drawer.css
3. Add code below to bottom of file

#menu-drawer {
	background: #fff;
}

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

PageFly-Victor
Shopify Partner
7865 1785 3071

Hi @coolerdrinks ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-menu-drawer.css->paste below code at the bottom of the file:

 

@media (max-width: 767px){
div#menu-drawer {
    background:white;
    filter: none;
}
}

Hope my answer will help you.

Best regards,

Victor | PageFly

GemPages
Shopify Partner
5597 1261 1224

Hello @coolerdrinks ,

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1677554474270.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1677554491376.png

    <style>
      .header__submenu.list-menu {
          background: #fff !important;
      }
      
      div#menu-drawer {
          background: #fff !important;
      }
    </style>

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

SAN_MSWEB
Shopify Expert
1135 135 141

This is an accepted solution.

Hi @coolerdrinks 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
#menu-drawer {background-color: #ffff !important;}




Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Vinochka
Tourist
4 0 0

I wanted to do the same thing. This solution fixed the issue quick as a wink! Thank you!!!

SAN_MSWEB
Shopify Expert
1135 135 141

Hello,

 

Thank you for your reply.

 

Glad that you liked it.

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin