I've been trying to add a blur backdrop filter to my dropdown menu in a React JS project, but it just doesn't seem to work. It works perfectly fine with all other elements except this one.
What I'm looking for is to have the same blur effect as in the header applied to the dropdown menu. Here's an image of the problem
I really hope someone can help me figure this out. I've tried various approaches but nothing seems to be working.
This is the React code snippet:
function Header(){
return(
<div>
<div className="Header">
<div className="Header-Container">
<img className="Logo" src={Logo} />
<div className="search-cont"><input type="search" id="site-search" name="q" placeholder="Search..."></input></div>
<NavItem >
<DropdownMenu/>
</NavItem>
<img id="Basket" src={Basket}/>
<img id="Profile" src={Profile}/>
</div>
</div>
</div>
);
}
function NavItem(props){
const[open, setOpen] = useState(false);
return(
<div className="Category">
<div onClick={() => setOpen(!open)}>
All categories
<img id="DownArrow" src={DownArrow}/>
</div>
{open && props.children}
</div>
);
}
function DropdownMenu(){
function DropdownItem(props){
return(
<div className="menu-item">
{props.children}
</div>
);
}
return(
<div className="dropdown">
<DropdownItem>
#Hits
</DropdownItem>
</div>
);
}
And here is the SCSS code:
body{
.Header {
.dropdown{
backdrop-filter: blur(5px) opacity(100%);
background: #333333a5 0% 0% no-repeat padding-box;
display: inline-block;
box-shadow: inset 0px 0px 35px #c8c8c810, 0px 3px 30px #0000004D;
border: 1px solid #666666a8;
border-radius: 15px;
z-index: 10;
position: absolute;
top: 0vh;
padding-top: 40%;
padding-left: 20%;
padding-right: 20%;
padding-bottom: 40%;
opacity: 1;
.menu-item{
height: 2vw;
width: 12vw;
margin-bottom: 5%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
transition: all 0.4s ease-in-out;
text-align: center;
font: normal normal bold 18px Montserrat;
letter-spacing: 1.2px;
color: #FFFFFF;
opacity: 1;
cursor: pointer;
}
.menu-item:hover {
background-color: #FFFFFF28;
}
}
}