I am working on a website and ran into a little problem. Everything works nice but the hamburger icon stops to work or is not clickable when the sticky navbar is above a relative positioned element like a div-block. I am using Tailwindcss and a very simple js script. I hope somebody can help me with that.
Here the navbar code:
<!-- Hambuger Icon Manu Balken-->
<div class="sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow">
<button class="block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2">
<span>
<span class="block bg-black w-8 h-0.5 mb-1 "></span>
<span class="block bg-black w-8 h-0.5 my-1"></span>
<span class="block bg-black w-8 h-0.5 mt-1"></span>
</span>
</button>
<a class="block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif"
href="#">Jetzt anfragen!</a>
</div>
<div class="navbar-menu relative z-50 hidden">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
<!--mobile side menu-->
<nav
class="fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto">
<div class="flex items-center mb-8">
<button class="navbar-close h-8">
<span class="block">
<span class="block bg-black w-8 h-0.5 rotate-45 translate-y-1"></span>
<span class="block opacity-0 bg-black w-8 h-0.5"></span>
<span class="block bg-black w-8 h-0.5 -rotate-45 "></span>
</span>
</button>
</div>
<div>
<ul class="flex flex-col justify-center items-center">
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
href="#">Home</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
href="#">About Us</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
href="#">Services</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
href="#">Pricing</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
href="#">Contact</a>
</li>
</ul>
</div>
<div class="mt-20">
<p class="my-4 text-xs text-center text-gray-800">
<span class="block my-3"><a href="tel:+12344567">Tel.: +12345678</a></span>
<span class="block my-3"><a
href="mailto:info@xyz.de?subject=Hochzeitsplanner gesucht">Email:
info@xyz.de</a></span>
</p>
<div class="pt-6 ">
<a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md"
href="#">Jetzt anfragen!</a>
</div>
</div>
</nav>
</div>
<!---- HEADER-->
<header class="flex flex-col justify-center items-center bg-white">
<div class="">
<img class=" w-52 h-52 lg:w-80 lg:h-80" src="./assets/img/xyz.png"
alt="Logo">
</div>
<div class="flex justify-center gap-8 pt-4 pb-8">
<a href="#"><img src="./assets/img/facebook.png" alt="Facebook" height="20px" width="20px"></a>
<a href="#"><img src="./assets/img/twitter.png" alt="Twitter" height="20px" width="20px"></a>
<a href="#"><img src="./assets/img/instagram.png" alt="Instagram" height="20px" width="20px"></a>
<a href="#"><img src="./assets/img/pinterest.png" alt="Pinterest" height="20px" width="20px"></a>
</div>
</header>
<!---Desktop Menu-->
<nav class="hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow">
<ul
class=" absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Home</a></li>
<li class="text-gray-300">
</li>
<li><a class="text-sm text-blue-600 font-bold" href="#">About Us</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Services</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Pricing</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Contact</a></li>
</ul>
<a class="hidden lg:inline-block lg:ml-auto lg:mr-3 py-2 px-6 bg-gray-200 hover:bg-gray-100 text-sm text-gray-900 font-bold rounded-sm transition duration-200"
href="#">Jetzt anfragen!</a>
<a class="hidden lg:inline-block py-2 px-6 bg-blue-500 hover:bg-blue-600 text-sm text-white font-bold rounded-xl transition duration-200"
href="#">Sign up</a>
</nav>
And here's the js script:
document.addEventListener('DOMContentLoaded', function () {
// open
const burger = document.querySelectorAll('.navbar-burger');
const menu = document.querySelectorAll('.navbar-menu');
if (burger.length && menu.length) {
for (var i = 0; i < burger.length; i++) {
burger[i].addEventListener('click', function () {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
// close
const close = document.querySelectorAll('.navbar-close');
const backdrop = document.querySelectorAll('.navbar-backdrop');
if (close.length) {
for (var i = 0; i < close.length; i++) {
close[i].addEventListener('click', function () {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
if (backdrop.length) {
for (var i = 0; i < backdrop.length; i++) {
backdrop[i].addEventListener('click', function () {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
});
I tried different z-values but without any effect. It works once I remove the relative class from one of the div blocks, but I definitely need that to position some elements. Something about the overlapping creates problems.
Consider applying a positive z-index to the elements that have position: sticky so that they appear higher in the stacking order than any position: relative elements that appear afterwards in the source order. For example, I have added z-50 to the two elements that have sticky, alongside a translucent relative-positioned <div> as per your description to demonstrate that this fixes the issue.
document.addEventListener('DOMContentLoaded', function() {
// open
const burger = document.querySelectorAll('.navbar-burger');
const menu = document.querySelectorAll('.navbar-menu');
if (burger.length && menu.length) {
for (var i = 0; i < burger.length; i++) {
burger[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
// close
const close = document.querySelectorAll('.navbar-close');
const backdrop = document.querySelectorAll('.navbar-backdrop');
if (close.length) {
for (var i = 0; i < close.length; i++) {
close[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
if (backdrop.length) {
for (var i = 0; i < backdrop.length; i++) {
backdrop[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
});<script src="https://cdn.tailwindcss.com"></script>
<div class="sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow z-50">
<button class="block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2">
<span>
<span class="block bg-black w-8 h-0.5 mb-1"></span>
<span class="block bg-black w-8 h-0.5 my-1"></span>
<span class="block bg-black w-8 h-0.5 mt-1"></span>
</span>
</button>
<a class="block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif" href="#">Jetzt anfragen!</a>
</div>
<div class="navbar-menu relative z-50 hidden">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
<!--mobile side menu-->
<nav class="fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto">
<div class="flex items-center mb-8">
<button class="navbar-close h-8">
<span class="block">
<span class="block bg-black w-8 h-0.5 rotate-45 translate-y-1"></span>
<span class="block opacity-0 bg-black w-8 h-0.5"></span>
<span class="block bg-black w-8 h-0.5 -rotate-45"></span>
</span>
</button>
</div>
<div>
<ul class="flex flex-col justify-center items-center">
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Home</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">About Us</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Services</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Pricing</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Contact</a>
</li>
</ul>
</div>
<div class="mt-20">
<p class="my-4 text-xs text-center text-gray-800">
<span class="block my-3"><a href="tel:+12344567">Tel.: +12345678</a></span>
<span class="block my-3"><a href="mailto:info@xyz.de?subject=Hochzeitsplanner gesucht">Email: info@xyz.de</a></span>
</p>
<div class="pt-6">
<a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md" href="#">Jetzt anfragen!</a>
</div>
</div>
</nav>
</div>
<!---- HEADER-->
<header class="flex flex-col justify-center items-center bg-white">
<div class="">
<img class="w-52 h-52 lg:w-80 lg:h-80" src="https://picsum.photos/1000/1000" alt="Logo" />
</div>
<div class="flex justify-center gap-8 pt-4 pb-8">
<a href="#"><img src="https://picsum.photos/20/20" alt="Facebook" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?" alt="Twitter" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?0" alt="Instagram" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?1" alt="Pinterest" height="20px" width="20px" /></a>
</div>
</header>
<!---Desktop Menu-->
<nav class="hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow z-50">
<ul class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Home</a></li>
<li class="text-gray-300"></li>
<li><a class="text-sm text-blue-600 font-bold" href="#">About Us</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Services</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Pricing</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Contact</a></li>
</ul>
<a class="hidden lg:inline-block lg:ml-auto lg:mr-3 py-2 px-6 bg-gray-200 hover:bg-gray-100 text-sm text-gray-900 font-bold rounded-sm transition duration-200" href="#">Jetzt anfragen!</a>
<a class="hidden lg:inline-block py-2 px-6 bg-blue-500 hover:bg-blue-600 text-sm text-white font-bold rounded-xl transition duration-200" href="#">Sign up</a>
</nav>
<div class="h-[200vh] relative bg-red-500/50">