In designing the mobile version of my website, I encountered an issue with applying a blurred background to both the header and menu-content. Strangely, when one element is blurred, the other loses its blur effect. Below are snippets of CSS, HTML, and JS for implementing a dropdown menu:
@media screen and (max-width: 767px) {
.header {
position: fixed;
width: 100%;
z-index: 2;
background-color: rgba(34, 35, 37, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
transition: all 0.3s;
}
.menu-content {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgba(34, 35, 37, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
overflow: hidden;
transition: max-height 0.5s ease;
max-height: 0;
z-index: 3;
}
<body>
<div id="particles-js"></div>
<header class="header">
<a href="/" class="josefin-sans-header">OMNIA</a>
<div class="menu-button" onclick="toggleMenu()">
<div class="menu-line top"></div>
<div class="menu-line middle"></div>
<div class="menu-line bottom"></div>
</div>
<nav class="menu-content" id="menuContent">
<div class="menu-item pt-sans-regular-options" id="premium-option">Premium♾️</div>
<div class="menu-item pt-sans-regular-options">Commands</div>
<a href="https://discord.com/api/oauth2/authorize?client_id=595589012270612508&permissions=8&scope=bot%20applications.commands" class="menu-item pt-sans-regular-options" target="_blank">Invite Bot</a>
<a href="https://discord.gg/DajNSdYq" class="menu-item pt-sans-regular-options" target="_blank">Help</a>
<div class="menu-item pt-sans-regular-options">Authorization</div>
</nav>
</header>
<section class="home geologica-title">
<div class="content">
<h2> OMNIA </h2>
</div>
</section>
<div class="additional-rectangle">
<div class="server-stats">
<div class="server-count-text geologica-title" id="server-count-text">Loading...</div>
<div class="avatars" id="server-avatars">
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
<div class="avatar"></div>
</div>
</div>
</div>
<div class="additional-rectangle2">
</div>
</body>
function toggleMenu() {
var menuButton = document.querySelector('.menu-button');
var menuContent = document.getElementById('menuContent');
menuButton.classList.toggle('x-active');
if (menuContent.style.maxHeight) {
menuContent.style.maxHeight = null;
} else {
menuContent.style.maxHeight = menuContent.scrollHeight + "px";
}
}
My intention was to have both the header and menu-content elements blurred. Any insights on how to achieve this would be greatly appreciated.