iframe blockiert eigene Navbar (Sticky mit tailwind)

[Bennyaa]

Hallo, ich habe eine Navbar "gebaut".

<nav>
<!-- Flexbox for the whole navbar -->
<div class="sticky z-50 px-4 py-0.5 flex justify-center items-center bg-black">

<!-- Logo -->
<a href="#">
<img class="max-h-10" src="img/Logo_Transparent.png" alt="Logo">
</a>
<!-- menu Button -->
<div>
<button class="nav-menu-button py-3 pl-8 text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
<!-- nav menue -->
<div class="nav-menu z-40 absolute transform -translate-y-full duration-500 transition ease-in-out w-full bg-white">
<a class="px-bs-5% border-b h-12 border-gray-200 text-sm flex justify-between items-center py-2 font-bold hover:bg-gray-300 hover:text-blue-400 duration-500" href="kontakt.html">
<div class="flex space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<p>Kontakt</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</nav>

dazu wird dieses Js. aufgerufen:

// grab everithing we need
const navbtn = document.querySelector("button.nav-menu-button");
const navmenu = document.querySelector(".nav-menu");
const main = document.querySelector("main");
navbtn.addEventListener("click", toggleMobileMenu);
function toggleMobileMenu() {
navmenu.classList.toggle("-translate-y-full");
main.classList.toggle("translate-y-36");
}

Das funktioniert alles einwandfrei und beim Klick auf das Menü, slided die Navbar nach unten.
baue ich nun ein iframe ein:

<main class="z-0">
<iframe class="" src="https://meinzie.net">
</main>

so wird die Navbar irgendwie blockiert. Es slided nichts mehr.
Habe es wie zu sehen schon versucht über z-0 .... aber es tut sich nichts.

 

[Wunderharke5000]

Moin,

Über den iFrame wird ja die gesamte angegebene Seite in den DOM geladen. Da kann es sein, dass es zB Elemente wie „main“ doppelt gibt und dann der querySelector nicht funktioniert.
Am besten gibst du allen Elementen, die du brauchst eindeutige IDs oder Klassen und rufst die damit in deinem Javascript-Code ab, das sollte helfen

 

[Bennyaa]

Problem gefunden....

</iframe>

hat gefehlt :-(