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

[orby]

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.

[PageFly-Noah]

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

[orby]

MyLittleHuman.co

[Moeed]

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:

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

Best Regards,
Moeed

[PageFly-Noah]

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

[suyash1]

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

[orby]

yes, www.MyLittleHuman.co

[suyash1]

@orby - what color do you want?

[orby]

the color of the blue/green announcement bar on top

[Vinsinfo]

@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;
  }
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[AnneLuo · 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:

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

[orby]

This worked! Thank you so much 😁

[AnneLuo]

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.

[orby]

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

[iCart_App]

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;
}
}