Blurry background for menu sidebar drawer

[veluxe1]

How to make menu sidebar drawer background become blurry like this ALD example:

[Moeed]

Hey @veluxe1

Remove the code which you added in your previous post and add this updated code below.

{% if template == 'index' %}
<style>
@media screen and (min-width: 768px) {
#header-component[data-menu-style=menu] .header__drawer {
    display: flex !important;
}
.header__column--center {
    display: none !important;
}
.header__column.header__column--left {
    display: flex !important;
    justify-content: space-between !important;
    width: 50% !important;
}
.header__columns.spacing-style {
    display: flex !important;
    justify-content: space-between !important;
}
.menu-drawer.color-scheme-1 {
    background: #0000008a !important;
}
.menu-drawer.color-scheme-1 * {
    color: white !important;
}
}
</style>
{% endif %}

RESULT:

---

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

[tim_tairli]

You’ve got it working with this code:

.menu-drawer {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

I suggest to change it like this to also apply the same effect to the cart drawer for consistency:

.menu-drawer,
.cart-drawer__dialog {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  --color-background: transparent;
}

End result:

and

---

Also, there is a screen width between 750 and 768 when you horizontal menu is displayed rather than hamburger:

I guess it’s because of the previous code you’ve added which uses

@media screen and (min-width: 768px) {

You need to change this line to

@media screen and (min-width: 750px) {

[veluxe1]

How to change it for mobile too? Just for the sidebar background, do i need to paste the code at base.css?