Solved

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

orby
Tourist
17 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
612 123 126

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
1256 222 255

 

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
17 0 2

MyLittleHuman.co

Moeed
Shopify Partner
3878 981 1225

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 developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
PageFly-Noah
Shopify Partner
1256 222 255

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
9381 1169 1509

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
orby
Tourist
17 0 2
suyash1
Shopify Partner
9381 1169 1509

@orby - what color do you want?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
orby
Tourist
17 0 2

the color of the blue/green announcement bar on top

Vinsinfo
Shopify Partner
302 112 107

@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
612 123 126

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
17 0 2

This worked! Thank you so much 😁

AnneLuo
Shopify Partner
612 123 126

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
17 0 2

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

iCart_App
Shopify Partner
552 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