javascript is not running as expected

February 28, 2023

I’m trying to make html css js responsive but it doesn’t work as expected, when it’s minimized it’s already responsive but when onclick it doesn’t work.
navigation and navbar won’t appear and disappear when clicked.
html and css are working
but js I don’t know what’s wrong or wrong
anyone can help me?

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

console.log(menu); // cek "menu-icon" 
console.log(navbar); // cek "navbar"

menu.onclick = () => {
    menu.classList.toggle("bx-x");
    navbar.classList.toggle("open");
}

#menu-icon
{
    font-size: 35px;
    color: var(--text-color);
    cursor: pointer;
    z-index: 10001;
    display: none;
}


/* ini untuk mengatur tampilan hp */
@media (max-width: 1280px)
{
    header
    {
        padding: 14px 2%;
        transition: .2s;
    }
    .navbar a
    {
        padding: 5px 0;
        margin: 0px 20px;
    };
}

@media (max-width: 1090px)
{
    #menu-icon
    {
        display: block;
    }   
    .navbar
    {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 270px;
        height: 29hv;
        background: var(--main-color);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 10px;
        transition: all .50s ease;
    }

    .navbar .open
    {
        right: 2%;
    }
}

    
      <ul class="navbar">
        <li><a href="#" class="active">HOME</a></li>
        <li><a href="#">EVENT</a></li>
        <li><a href="#">ABOUT</a></li>
      </ul>
      <div class="main">
        <div class="bx bx-menu" id="menu-icon"></div>
      </div>
    </header>
    <!-- js link -->
    <script type="text/javascript" src="js/script">
    </script>

>Solution :

The bug is in your CSS here:

.navbar .open

Change it to:

.navbar.open

The rule as it appears in your code specifies an element with class open which has an ancestor with class navbar. The rule you want is one which specifies an element with both classes navbar and open.