Re: How to change the background color of main menu on mobile view?

Solved

How to change the background color of main menu on mobile view?

orby
Tourist
18 0 2

IMG_1522.jpeg

Someone please help, how can I change the mobile view main menu background color? I do not want it to be so dark like it is right now. Any help would be much appreciated, thank you.

Accepted Solution (1)
AnneLuo
Shopify Partner
733 142 152

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Add the code below to the theme.scss.css file

.SidebarMenu{
   background: #6eccc8 !important;
}
.SidebarMenu .Drawer__Content:before,
.SidebarMenu .Drawer__Footer:before {
   display: none !important;
}

Result:

AnneLuo_0-1716189736320.png

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 14 (14)

PageFly-Noah
Shopify Partner
1317 233 268

 

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

orby
Tourist
18 0 2

MyLittleHuman.co

Moeed
Shopify Partner
4309 1107 1356

Hey @orby 

 

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>
.Drawer__Close {
    color: black !important;
}
.SidebarMenu .Heading, .supports-hover .SidebarMenu .Link--primary:hover {
    color: black !important;
}
.Collapsible {
    border-color: black !important;
}
li.Linklist__Item a {
    color: black !important;
}
aside.Drawer__Footer {
    box-shadow: 0 1px #00000040 inset !important;
}
select.CurrencySelector__Select {
    color: black !important;
}
.Select--transparent svg {
    color: black !important;
}
ul.SidebarMenu__Social.HorizontalList.HorizontalList--spacingFill {
    border-left: 1px solid rgb(0 0 0 / 25%) !important;
}
span.Icon-Wrapper--clickable {
    color: black !important;
}
.SidebarMenu {
    background: white !important;
}
</style>

RESULT:

Moeed_0-1716186133847.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


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
PageFly-Noah
Shopify Partner
1317 233 268

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

 

<style>
  #sidebar-menu{
    background: white;
  }
.SidebarMenu .Drawer__Content::before {
    background-image: none !important;
}
.Drawer__Main a{
 color: black !important;
}
</style>

 

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

suyash1
Shopify Partner
9540 1192 1531

@orby - it will need css, can you please share your website link?

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
orby
Tourist
18 0 2
suyash1
Shopify Partner
9540 1192 1531

@orby - what color do you want?

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
orby
Tourist
18 0 2

the color of the blue/green announcement bar on top

Vinsinfo
Shopify Partner
351 125 118

@orby Please follow below steps to change the background color of the main menu. Let me know whether it is helpful for you.

 

1. From admin go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Header" and paste the below code in the "Custom CSS" field and save changes.
NOTE: You can change the background color as per you need.

 

@media screen and (max-width: 1239px){
  .SidebarMenu{
    background-color: #6ECCC8;
  }
  .Drawer__Content:before, .Drawer__Footer:before {
    background-image: unset !important;
  }
}

 

 

Vinsinfo_0-1716185879974.pngVinsinfo_1-1716185887509.png

 

Result will be like,
Vinsinfo_2-1716185919471.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
AnneLuo
Shopify Partner
733 142 152

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Add the code below to the theme.scss.css file

.SidebarMenu{
   background: #6eccc8 !important;
}
.SidebarMenu .Drawer__Content:before,
.SidebarMenu .Drawer__Footer:before {
   display: none !important;
}

Result:

AnneLuo_0-1716189736320.png

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

orby
Tourist
18 0 2

This worked! Thank you so much 😁

AnneLuo
Shopify Partner
733 142 152

Thank you for your reply. I'm glad to hear that the solution worked well for you.
If you require any more help, please don't hesitate to reach out.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

orby
Tourist
18 0 2

I did this and it did not do anything to the background color.

iCart_App
Shopify Partner
581 58 107

Hello @orby 

You can try this code: it will be helpful to you 

Go to the Online Store->Theme->Edit code->Assets->theme.scss.css>add this code at the bottom of the file.

 

@media only screen and (max-width: 768px) {
.SidebarMenu .Drawer__Content:before {
    background-image: unset !important;
}
.SidebarMenu {
    background: #6eccc8 !important;
}
}

 

 

iCart Cart Drawer Cart Upsell App


- If you find the solution helpful, please accept and like it
- To learn more visit www.identixweb.com