product menu transparent background refresh theme

[Mwilson67]

Hello Shopify community,

My mobile view product menu shows up transparent when the menu burger is selected. It is very hard for customers to read. I have the refresh theme. How can I change the menu to a solid color so that it can be more easily read by customers?

[theycallmemakka]

Hi @Mwilson67 ,

Can you provide link to your store

[Mwilson67]

Sure, it’s
https://cliksenz.com/

[theycallmemakka]

Hi @Mwilson67 

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </head>

<style>
@media (max-width: 991px) {
    div#menu-drawer {
        --gradient-background: #ffffff;
        background: var(--gradient-background);
    }
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Mwilson67]

Thank you so much. I will apply the code and let you know how it goes.

[Dan-From-Ryviu]

Hi @Mwilson67 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.js details[open]>.menu-drawer {
background: #fff !important;
}