Remove Semi-Transparent Background By Clicking Menu

Store Design
, ,

Topic summary

A user implemented a transparent header but encountered an unwanted semi-transparent white background overlay when clicking the menu button.

Initial Solutions Offered:

  • One approach suggested adding CSS to the theme’s stylesheet (base.css, style.css, or theme.css) to modify .cart-reward__overlay properties
  • Another solution involved adding custom CSS code in the theme.liquid file below the <head> tag to create a blur effect at 35% transparency

Iterative Problem-Solving:

  • The blur solution initially worked but caused issues on product pages where everything except the header logo became blurred
  • The code was refined to fix the product page issue
  • A final adjustment was needed to ensure the cart/basket also blurred properly when containing products

Resolution:
The issue was successfully resolved through multiple code iterations. The user confirmed the solution worked as intended, with the blur effect applying correctly across all pages including the cart.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hello! I’ve implemented a transparent header on my website, but every time I click on the menu button, a semi-transparent white background appears, covering my site and giving it an unappealing look, as shown in the image. How can I adjust this so that the background becomes transparent and blurred at 35%? Thank you!

Just-Want.com

i use Crave 12.0.0

Capture.PNG
Capture.PNG1126×952 64.3 KB

1 Like
2

Hi @ronii_1

Is this what you mean?

Made4uoRibe_0-1711474328811.png
Made4uoRibe_0-1711474328811.png1616×829 58.7 KB

If it is, check this one.

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 “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:

.cart-drawer__overlay {
    background: white;
    opacity: .9;
}

And Save.

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

3

Hey @ronii_1 ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711474858476.jpeg
ThePrimeWeb_0-1711474858476.jpeg1253×933 87.9 KB

Result:

ThePrimeWeb_1-1711474875830.png
ThePrimeWeb_1-1711474875830.png1497×1004 65 KB

4

Hello, thank you for your response, it works as I wanted but there is a problem. When I am on my product page, this appears:

Capture2.PNG
Capture2.PNG1154×848 54.3 KB

I really want everything to be blurry except the logo in the header bar.

5

Hey @ronii_1 ,

Just replace the code with this
6

It’s perfect, thank you so much for fixing my issue. Do you see the update on my site? Because when I publish the modification, it’s not being reflected (but it remains active on my Shopify editor).

7

Yeah i see it, your site is probably cached.

8

I just noticed that the basket doesn’t blur when it has a product in it, do you have a solution?

9

Replace the code with this
1 Like
10

Thank you, it’s okay, the issue has been resolved. Thank you very much for what you’ve done.