Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
Hey @ronii,
Just replace the code with this
<style>
cart-drawer.drawer.is-empty.animate.active {
background: transparent !important;
transition: none !important;
}
body:has(cart-drawer.drawer.is-empty.animate.active):before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
width: 100% !important;
backdrop-filter: blur(10px) !important;
background: rgba(255,255,255,0.1) !important;
z-index: 1 !important;
}
cart-drawer.drawer.is-empty.animate {
background: transparent !important;
}
</style>
Hi @ronii
Is this what you mean?
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!
Hey @ronii,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
cart-drawer.drawer.is-empty.animate.active {
background: transparent !important;
transition: none !important;
}
body:has(cart-drawer.drawer.is-empty.animate.active):before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
width: 100% !important;
backdrop-filter: blur(10px) !important;
background: rgba(255,255,255,0.1) !important;
}
cart-drawer.drawer.is-empty.animate {
background: transparent !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Result:
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:
I really want everything to be blurry except the logo in the header bar.
This is an accepted solution.
Hey @ronii,
Just replace the code with this
<style>
cart-drawer.drawer.is-empty.animate.active {
background: transparent !important;
transition: none !important;
}
body:has(cart-drawer.drawer.is-empty.animate.active):before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
width: 100% !important;
backdrop-filter: blur(10px) !important;
background: rgba(255,255,255,0.1) !important;
z-index: 1 !important;
}
cart-drawer.drawer.is-empty.animate {
background: transparent !important;
}
</style>
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).
Yeah i see it, your site is probably cached.
I just noticed that the basket doesn't blur when it has a product in it, do you have a solution?
Replace the code with this
<style>
cart-drawer.drawer.animate.active {
background: transparent !important;
transition: none !important;
}
body:has(cart-drawer.drawer.animate.active):before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
width: 100% !important;
backdrop-filter: blur(4px) !important;
background: rgba(255,255,255,0.1) !important;
z-index: 2 !important;
}
cart-drawer.drawer.animate {
background: transparent !important;
}
</style>
Thank you, it's okay, the issue has been resolved. Thank you very much for what you've done.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025