Change the background behind open cart and menu drawer

Change the background behind open cart and menu drawer

aclothingbrand
Excursionist
15 0 9

Hi! 
I have an issue regarding the background behind my menu and cart drawer.

When I open one of the drawers, the background gets a blue tint. I would like it to be transpartent but with a black tint. In the picture below is the issue.

 Opened menu drawer (blue tint visible)

Screenshot 2024-09-27 at 14.59.18.png

 

normal landing page:

Screenshot 2024-09-27 at 14.59.54.png

I've looked in the code and the theme settings, etc. but could not manage to fix this

Would appreciate any tips or help!

Thanks in advance,

Aclothingbrand.

Replies 5 (5)

Moeed
Shopify Partner
5519 1496 1787

Hey @aclothingbrand 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


aclothingbrand
Excursionist
15 0 9

i miss clicked haha.

Store URL is sonofjohnlabel.com
password: Password123

Made4uo-Ribe
Shopify Partner
8410 2011 2466

Hi @aclothingbrand 

Its password protected. Would you mind sharing it? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Made4uo-Ribe
Shopify Partner
8410 2011 2466

Hi @aclothingbrand 

Thanks for the info, If you make it transparent with black color. here is the result. 

Made4uoRibe_0-1727455918646.png

Instruction.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
.menu-drawer {
    background: transparent !important;
}
.list-menu__item, details[open]>.header__submenu {
    color: black !important;
}

</style>

 

Ansd Save. 

My Suggestion. The color of your header text and icons makes them difficult to see.

Made4uoRibe_1-1727456125462.png

Made4uoRibe_2-1727456139731.png

Same Instruction. 

 

<style>
.menu-drawer {
    opacity: .5;
}

.list-menu__item, details[open]>.header__submenu {
    color: black !important;
}

</style>

 

And save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
aclothingbrand
Excursionist
15 0 9

Hi,

sorry for the misunderstanding. 

I mean the background everything but the menu. So the rest of the page you still see when the drawer is out.

Thanks in advance