le javascript de m'a navbar responsive ne fonctione pas

blowsom70
Les bases HTML/CSS
Javascript

j'ai essayé de tout changé mais rien n'y faire mobile-menu ne s'active pas.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QRlod-Scan</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 150vh;
            background-color: #101728;
        }

        header {
            height: 100vh;
            width: 100vw;
        }

        .background {
            opacity: 0.15;
            padding-top: 5px;
            background-image: url(IMAGE/QRlod-backlop.png);
            background-size: cover;
            width: 100%;
            height: 100%;
            color: aliceblue;
            background-position: center;
        }

        .logo img {
            margin-top: 20px;
            width: 350px;
        }

        .navbar {
            position: absolute;
            padding: 30px;
            display: flex;
            justify-content: space-between;
            width: 98%;
            box-sizing: border-box;
            align-items: center;

        }

        .navbar .nav-links ul {
            display: flex;
        }

        .navbar .nav-links ul li {
            margin: 0 25px;
        }

        .navbar .burger {
            display: none;
            position: absolute;
            width: 40px;
            top: 50px;
            right: 50px;
        }

        @media screen and (max-width: 900px) {
            .navbar {
                padding: 0;
            }

            .navbar .burger {
                display: block;
            }

            .nav-links {
                top: 0;
                left: 0;
                position: absolute;
                background-color: rgba(0, 0, 0, 0.491);
                backdrop-filter: blur(3px);
                width: 100%;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: -100%;
                transition: all 0.5s ease;
            }

            .nav-links .mobile-menu {
                margin-left: 0;
            }

            .nav-links ul {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .navbar .nav-links ul li {
                margin: 25px 0;
                font-size: 35px;
            }
        }
    </style>
</head>

<body>
    <header style="position: absolute; color: rgb(255, 255, 255);">
        <nav class="navbar">
            <div class="logo">
                <img src="IMAGE/QRlodlobt.png">
            </div>
            <div class="nav-links">
                <ul>
                    <li>DFBHY</li>
                    <li>HGUFYTE5</li>
                    <li>HHVYR</li>
                    <li>VJIBHUVYF</li>
                    <li>HVFUGY</li>
                </ul>
            </div>
            <img src="IMAGE/navcam.png" alt="menu hamburger" class="burger">
        </nav>
    </header>
    <div class="background">
    </div>
    <script>
        const navSlide = () => {
            const menuHamburger = document.querySelector(".burger")
            const navLinks = document.querySelector(".nav-links")

            menuHamburger.addEventListener('clic', () => {
                navLinks.classList.toggle('mobile-menu')
            })
        }
    </script>
</body>

</html>

Ce que je veux

c'est que quand on touche sur le burger.

.nav-links .mobile-menu {
                margin-left: 0;
            }

s'active.

Ce que j'obtiens

rien du tout :(

3 réponses

blowsom70
Auteur
Réponse acceptée

j'ai réglé le probleme
le .navbar .burger n'était pas cliquable il fallait le mettre au-dessus des autres avec z-index: 999;

    .navbar .burger {
        z-index: 999;
        display: none;
        position: absolute;
        width: 40px;
        top: 50px;
        right: 50px;
    }
Smith john

Salut, peux tu ajouter un k à clic dans l'eventListener et nous dire si maintenant ça fonctionne stp ?

blowsom70
Auteur

je l'ai mis sauf que mobile-menu ne veux pas s'affiché à coté de nav-links