Why Hamburger menu does not toggle when clicked

user_17958243 0
Viewed 50

My hamburger menu displays perfectly on small screens but does not activate when I click it. I implemented the JavaScript code which should toggle the menu when clicked, but it doesn't work at all. I made the hamburger with CSS using the span tag. When clicked, the hamburger menu should toggle into an X, but it does not toggle. Is something wrong with my script?

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");

})
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.2%;
    font-family: Roboto, Arial, Helvetica, sans-serif;

}

body {
    font-weight: bold;
    font-size: 1.2rem;
}

.header {
    background-color: #000000;
    height: 52px;
    width: 100%;
}

.header .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    cursor: pointer;

}

.nav-heading {
    margin-left: 2rem;
    color: #ff6a00;
}

.nav-menu {
    display: flex;
    gap: 4rem;



}

.navbar a {
    text-decoration: none;



}

.nav-menu a {

    transition: 0.7s ease;
    margin-right: 4rem;
    color: #fff;
}

.nav-menu a:hover {
    color: rgb(0, 72, 136);
}


.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #f7f7f7f7;
}

@media(max-width:768px) {
    .hamburger {
        display: block;
        margin-right: 3rem;
    }

    .navbar .nav-menu {
        display: none;
    }

    .hamburger .active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger .active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);

    }

    .hamburger .active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);

    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        gap: 0;
        flex-direction: column;
        background-color: #000000;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        cursor: pointer;
    }

    .nav-menu a {
        margin: 16px 0;
    }

    /*this is for when you active the the hamburger*/

    .nav-menu .active {
        left: 0;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HamBurger Nav</title>
    <link rel="stylesheet" href="ResponNavbar.css">
    <script src="ResponNvar.js"></script>


</head>

<body>
    <div class="header">
        <nav class="navbar">
            <a class="nav-heading" href="#">Ocean-fontier</a>
            <ul class="nav-menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>

        </nav>

    </div>



</body>

</html>

css html javascript
1 Answers

Only one change was needed - change all your CSS rules which have (eg) .nav-menu .active to .nav-menu.active (with no space). The latter is how you target an element with both classes, whereas with the space it's a parent-child relationship - effective all elements of class active which are inside one of class nav-menu. Of course the former is what you actually want here.

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");

})
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.2%;
    font-family: Roboto, Arial, Helvetica, sans-serif;

}

body {
    font-weight: bold;
    font-size: 1.2rem;
}

.header {
    background-color: #000000;
    height: 52px;
    width: 100%;
}

.header .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    cursor: pointer;

}

.nav-heading {
    margin-left: 2rem;
    color: #ff6a00;
}

.nav-menu {
    display: flex;
    gap: 4rem;



}

.navbar a {
    text-decoration: none;



}

.nav-menu a {

    transition: 0.7s ease;
    margin-right: 4rem;
    color: #fff;
}

.nav-menu a:hover {
    color: rgb(0, 72, 136);
}


.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #f7f7f7f7;
}

@media(max-width:768px) {
    .hamburger {
        display: block;
        margin-right: 3rem;
    }

    .navbar .nav-menu {
        display: none;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);

    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);

    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        gap: 0;
        flex-direction: column;
        background-color: #000000;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        cursor: pointer;
    }

    .nav-menu a {
        margin: 16px 0;
    }

    /*this is for when you active the the hamburger*/

    .nav-menu.active {
        left: 0;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HamBurger Nav</title>
    <link rel="stylesheet" href="ResponNavbar.css">
    <script src="ResponNvar.js"></script>


</head>

<body>
    <div class="header">
        <nav class="navbar">
            <a class="nav-heading" href="#">Ocean-fontier</a>
            <ul class="nav-menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>

        </nav>

    </div>



</body>

</html>

user_84750540
Related