I'm currently utilizing SCSS and within my _header.scss file, I am importing it into my main.scss like so:
@use "header";
Here is the snippet of code from my header file (I've removed some less important details such as borders, margins, paddings, font-size etc.):
header {
position: fixed;
width: calc(96% - 32px);
height: 34px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
z-index: 10;
backdrop-filter: blur(12px);
background: rgba(#000000, 0.1);
nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
ul {
list-style-type: none;
display: flex;
flex-direction: row;
li {
position: relative;
z-index: 11;
div.dropdown-content {
display: none;
position: absolute;
background: rgba(#000000, 0.1);
backdrop-filter: blur(12px);
&.active {
display: flex;
flex-direction: column;
}
}
}
}
}
}
It seems that the backdrop-filter: blur(12px); is not applying to my div.dropdown-content, although it works perfectly fine for the header itself.
The div.dropdown-content appears above other webpage contents as intended. The structure of my HTML/PHP mirrors the nesting in my SCSS.
Click here to view how the dropdown lacks background blur while the navbar does have it
I've attempted assigning a higher z-index to div.dropdown-content, but this didn't solve the issue either. The compilation of my SCSS into CSS is functioning correctly, with all styles applied except for the blur effect.
Would appreciate any assistance with this matter.