Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
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.
MyLittleHuman.co
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
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.
@orby - it will need css, can you please share your website link?
@orby - what color do you want?
the color of the blue/green announcement bar on top
@orby Please follow below steps to change the background color of the main menu. Let me know whether it is helpful for you.
@media screen and (max-width: 1239px){
.SidebarMenu{
background-color: #6ECCC8;
}
.Drawer__Content:before, .Drawer__Footer:before {
background-image: unset !important;
}
}
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:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
This worked! Thank you so much 😁
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.
I did this and it did not do anything to the background color.
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
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025