how to remove the semi-transparent background while clicking on menu drawer

Solved

how to remove the semi-transparent background while clicking on menu drawer

loyaltysyoung
Tourist
4 0 2

Hey, can someone help me. every time I click on my menu there is a semi-transparent background that pops up at the side cover my store is there a way to remove it? 

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
9855 2345 2942

This is an accepted solution.

Thanks, do you mean this is transparent, right?

Made4uoRibe_1-1736805838825.png

 

This makes the background of the menu so the customer focuses on the menu, not on the background or items. If you like to remove this one. Try this . 

 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

 

.menu-drawer-container .header__icon--menu[aria-expanded=true]:before { 
    background: transparent;
}

 

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1736805788508.png

     

 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

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.

View solution in original post

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
9855 2345 2942

Hi @loyaltysyoung 

Please, share your store URL. 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.
loyaltysyoung
Tourist
4 0 2
Made4uo-Ribe
Shopify Partner
9855 2345 2942

thanks for the info, its password protected. 

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.
loyaltysyoung
Tourist
4 0 2

sorry about that the password is rawhao

Made4uo-Ribe
Shopify Partner
9855 2345 2942

This is an accepted solution.

Thanks, do you mean this is transparent, right?

Made4uoRibe_1-1736805838825.png

 

This makes the background of the menu so the customer focuses on the menu, not on the background or items. If you like to remove this one. Try this . 

 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

 

.menu-drawer-container .header__icon--menu[aria-expanded=true]:before { 
    background: transparent;
}

 

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1736805788508.png

     

 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

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.
loyaltysyoung
Tourist
4 0 2

thank you so much it worked