So I'm trying to make a navigation translating (moving) from top to bottom. But the navigation goes over my header. I would like the navigation to go under header. Z-index is not working for me. Any clue on what the fix would be?
Here's the jsfiddle: https://jsfiddle.net/efvujt4L/
Here's the html:
<header class="p-4 border-b fixed top-0 left-0 right-0 z-10 relative">
<div class="max-w-4xl mx-auto flex justify-between relative">
<h1><a href="">Project</a></h1>
<div id="toggleNavigation" class="">
<label class="cursor-pointer flex flex-col w-5 h-5 justify-between overflow-hidden position">
<input id="toggleNavigation" type="checkbox" class="peer appearance-none" />
<span class="bg-black h-0.5 w-5 transition-all origin-left peer-checked:rotate-[42deg]"></span>
<span class="bg-black h-0.5 w-5 transition-all peer-checked:bg-opacity-0"></span>
<span class="bg-black h-0.5 w-5 transition-all origin-left peer-checked:-rotate-[42deg]"></span>
</label>
</div>
</div>
</header>
<nav id="navigation" class="flex flex-col divide-y transition-all -translate-y-full fixed top-14 right-0 left-0">
<a class="p-4" href="">Home</a>
<a class="p-4" href="">About me</a>
<a class="p-4" href="">Portfolio</a>
</nav>
And here's the javascript:
const navigation = document.getElementById("navigation");
const toggleNavigation = document.getElementById("toggleNavigation");
toggleNavigation.addEventListener("change", function () {
navigation.classList.toggle("-translate-y-full");
});