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

Store Design
, , , ,
1

IMG_1522.jpeg
IMG_1522.jpeg1182Ă—2226 43.6 KB

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.

2

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

3

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

4

yes, www.MyLittleHuman.co

5

MyLittleHuman.co

6

@orby - what color do you want?

7

the color of the blue/green announcement bar on top

8

@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.png
Vinsinfo_0-1716185879974.png405Ă—290 10 KB

Vinsinfo_1-1716185887509.png
Vinsinfo_1-1716185887509.png417Ă—751 36.2 KB

Result will be like,

Vinsinfo_2-1716185919471.png
Vinsinfo_2-1716185919471.png535Ă—879 10.8 KB

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

9

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 tag.

RESULT:

Moeed_0-1716186133847.png
Moeed_0-1716186133847.png374Ă—666 34.9 KB

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

Best Regards,
Moeed

10

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
AnneLuo_0-1716189736320.png312Ă—611 21.1 KB

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

1 Like
11

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

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

12

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

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

14

This worked! Thank you so much :grin:

15

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.