Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: 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
6325 1715 2067

Hey @aclothingbrand 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- 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
9052 2163 2670

Hi @aclothingbrand 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

Made4uo-Ribe
Shopify Partner
9052 2163 2670

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
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