Why isn't my backdrop-filter working on my menu-drawer?

Why isn't my backdrop-filter working on my menu-drawer?

Fyney
Excursionist
37 4 15

Hello, I need help adding a backdrop-filter to my menu-drawer, i been testing so many time that i lost count how many fail attempts is been.

 

This is an example that i did with my cart drawer:

Screenshot 2024-01-06 192236.png

A nice backdrop-filter with a background color of rgba(1, 9, 10, 0.5)

but this is what i got with my menu-drawer

Screenshot 2024-01-06 192255.png

 

 

 

it doesn't look good 😞

 

i been trying to add a backdrop-filter to my menu-drawer but everytime i do so it just tells me NAH you can't do that.

 

exemple:

.menu-drawer {

background: rgba(4, 4, 4, 0.8);
backdrop-filter: blur(20px);

}

 

 

 Can someone help? The things i have changed are this:

base.css

some icons for the header type .svg

component-menu-drawer.css and thats all

 

I'll leave the password and the website:

Password: St0r3P4ssw0rd

 

 

Reply 1 (1)

Fyney
Excursionist
37 4 15

I think i found the problem.

 

See if i add a backdrop to my header, my drawer then removes the backdrop-filter effect:

 

Screenshot 2024-01-07 034615.png

Yall can see it too just add this code to my .header

or just remove my backdrop-filter

 

.header { 
 backdrop-filter: blur(20px);
}

 

And yall would see that now the menu-drawer is working with his Blueness and Transparency.