Menu-drawer backdrop blur

[coastalthreadsnc]

Using Horizon theme and trying to get a transparent blur effect behind the navigation menu drawer on mobile. I’ve applied a backdrop-filter blue to the “.menu-drawer__backdrop” and nothing seems to work. Would anyone know where I should target these css styles to get the effect I’m looking for? Coastalthreadsnc.com

[suyash1]

@coastalthreadsnc please add this css to the very end of your styles.css file and check

shopify admin->online store->themes->edit theme code->assets->styles.css

@media screen and (max-width:749px){
.menu-drawer{box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
    background: rgba(0, 43, 54, 0.3) !important;
    backdrop-filter: blur(14px) saturate(170%) brightness(1.05) !important;}
}

[coastalthreadsnc]

Nope that didn’t do it. I actually already have a backdrop filter blur applied to the menu-drawer that is not working as well. This is the full additional CSS I have added to style the menu drawer and backdrop so far. .menu-drawer {
top: 65px;
max-height: 475px;
width: 100%;
background: rgba(0, 43, 54, 0.9);
backdrop-filter: blur(14px) saturate(170%) brightness(1.05);
border: 2px solid rgba(95, 170, 180, 0.22);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.menu-drawer__menu-item,
.menu-drawer__item,
.header-drawer__link {
font-size: 17px !important;
}
.menu-drawer__menu-item–child {
font-size: 14px !important;
margin-left: 10px;
}
.menu-drawer__backdrop {
margin-top: -9px;
margin-left: -8px;
backdrop-filter: blur(70px) brightness(0.9);
background: rgba(100, 115, 120, 0.55);
opacity: 1 !important;
pointer-events: auto;
}

[websensepro]

Hello, @coastalthreadsnc

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

@media (max-width: 768x){
.menu-drawer__backdrop {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); 
  background-color: rgba(0, 0, 0, 0.2);
}
}

Thank You!

[coastalthreadsnc]

Hi Unfortunately did not work - I already have those applied to my base css.

[suyash1]

@coastalthreadsnc do you want like the screenshot I shared? or it is bit different?

[tim_1]

backdrop-filter can be picky and depends on other properties, like isolation, stacking context, etc.

Try this approach – it directly targets sections after header:

#header-group:has(.menu-open)~ * {
  filter: blur(3px);
}

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[coastalthreadsnc]

Bit different. The screenshot you shared has a backdrop with transparency but not blur. See the mobile menu on this site for an example of what I’m looking for… https://darkseas.com/

[coastalthreadsnc]

That screenshot looks like what I’m going for. Where do I apply this? I copied to the theme settings custom CSS section and I’m not see that take effect.

[suyash1]

@coastalthreadsnc your current menu looks like the screenshot shared by @tim_1 , can you please elaborate what update do you want?

[tim_1]

Do I have backdrop-filter in my code?
I have filter

[coastalthreadsnc]

This is a screenshot after adding Tim’s code to the base.css. I tried it as filter as provided and also as backdrop-filter.

[tim_1]

Can you, please use filter, as I suggested:
Your code:

After correction:

And i do not see my code in your base.css

[coastalthreadsnc]

Okay I got it! For some reason when I put it in the custom CSS section of the theme editor it wouldn’t work but copying directly into the code did. What would I modify for this to work on desktop as well?

[tim_1]

Ok, no problem. After midningt I am getting triggered by “your code does not work”, sorry for that.

Try changing the code
to this if you want hovering over any menu item to trigger blur

#header-group:has(.menu-open, [aria-expanded="true"]) ~ * {
  filter: blur(4px)
}

Or this, if only for dropdowns:

#header-group:has(.menu-open, [aria-haspopup="true"][aria-expanded="true"]) ~ * {
  filter: blur(4px)
}

Also, 24 is IMO too much blur, but up to you.

The code in “Custom CSS” did not work because it had backdrop-filter but it’s great all sorted.

[coastalthreadsnc]

Haha all good! I appreciate your help!