why isn't the icon changing in the responsive mode?-CodePudding

This is my first time trying responsive web design. I am trying to create the website menu such that when I click on the menu icon, the whole menu will drop down. i am using the onclick command to do so. But when I go to the browser inspection it shows that there is some uncaught error in my javascript file. The menu is not dropping down and the even the icon isn't changing to a cross like I mentioned in the script. ps:the error is visible when I am in the media queries and not on default view (768px) can someone explain the error and tell me a solution?

HTML:

<!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">
    <!-- My css link -->
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <title>Product Landing Page</title>
</head>
<body>
    <!-- header from here -->
    <header>
        <a href="#" ><i ></i> FoodCo.</a>
        <nav >
            <a  href="#home">Home</a>
            <a href="#dishes">Dishes</a>
            <a href="#about">About</a>
            <a href="#menu">Menu</a>
            <a href="#review">Reviews</a>
            <a href="#contact">Contact</a>
        </nav>

        <div >
            <i  id="menu-bars"></i>
            <i  id="search-bars"></i>
            <a href="#" ></a>
            <a href="#" ></a>
        </div>
    </header>



    <!-- my js link -->
    <script src="script.js"></script>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

:root{
    --green: #27ae60;
    --black: #192a56;
    --light-color: #666;
    --box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
}
*{
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border: none;
    text-transform: capitalize;
    transition: all .3s linear;
}

html{
    font-size: 62.5%;
    overflow: hidden;
    scroll-padding-top:5.5rem;
    scroll-behavior: smooth;
}

header{
    position: fixed;
    top: 0; left: 0; right: 0;
    background: white;
    padding: 1rem 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: var(--box-shadow);
}

header .logo{
    color:var(--black);
    font-size: 2.5rem;
    font-weight: bolder;
}

header .logo i{
    color: var(--green);
}

header .navbar a{
    font-size: 1.7rem;
    border-radius: .5 rem;
    padding: .5rem 1.5rem;
    color:var(--light-color);
}

header .navbar a.active{
    background-color: var(--green);
    border-radius: .5rem;
    color: white;
}

header .navbar a:hover{
    background-color: var(--green);
    border-radius: .5rem;
    color: white;
}

header .icons i,
header .icons a{
    cursor: pointer;
    margin-left: .5rem;
    height: 4.5rem;
    line-height: 4.5rem;
    width: 4.5rem;
    text-align: center;
    font-size: 1.7rem;
    color: var(--black);
    border-radius: 50%;
    background: #eee;
}

header .icons i:hover,
header .icons a:hover{
    color: white;
    background: var(--green);
    transform: rotate(360deg);
}

header .icons #menu-bars{
    display: none;
}

/* media queries */
@media (max-width:991px){
    html{
        font-size: 55%;
    }

    header{
        padding: 1rem 2rem;
    }
}

@media (max-width:768px){
    header .icons #menu-bars{
        display:inline-block;
    }

    header .navbar{
        position: absolute;
        top:100%; right: 0; left: 0;
        background: white ;
        border-top: .1rem solid rgba(0, 0, 0, .2);
        border-bottom: .1rem solid rgba(0, 0, 0, .2);
        padding: 1rem;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    header .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    header .navbar a{
        display: block;
        padding: 1.5rem;
        margin: 1rem;
        width: 150px;
        font-size: 2rem;
        background: white;
    }
}

@media (max-width:991px){
    html{
        font-size: 50%;
    }
}

JS:

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

menu.onclick = () =>{
    menu.classList.toggle('fa-times');
    navbar.classList.toggle('active');
}

CodePudding user response：

I'm not able to write a comment yet due to insufficient rep, I've started to check your code and notice your id in querySelector is wrong you wrote '#menu-bar` but in your html you wrote menu-bars. Moreover you've made your menu display none so you can't click on it and proc the event. If it's not your problem make a comment and I'll proceed.

CodePudding user response：

In your html file there is this code:

 <i  id="menu-bars"></i>

when in your script.js file you have this code:

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

you need to put "s"

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

then it will be changed to cross