Help Me with my NavBar!

HTML

 <section id="header">

    <div class="header container">

        <div class="nav-bar">

            <div class="brand">

                <h1><a href="#hero"<span>Cheshire</span></a></h1>

            </div>

            <div class="nav-list">

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

                <ul>

                    <li><a href="#" data-after="Home">Home</a></li>

                    <li><a href="#" data-after="Services">Services</a></li>

                    <li><a href="#" data-after="Projects">Projects</a></li>

                    <li><a href="#" data-after="About">About</a></li>

                    <li><a href="#" data-after="Contacts">Contact</a></li>

                </ul>

            </div>

        </div>

    </div>

</section>

CSS

#header{

position: fixed;

z-index: 1000;

left: 0;

top: 0;

width: 100vw;

height:auto;

}

#header .header{

min-height: 8vh;

background-color: rgba(31, 30, 30, 0.24);

}

#header .nav-bar{

display: flex;

align-items: center;

justify-content: space-between;

width: 100%;

height: 100%;

max-width: 1300px;

padding: 0 10px;

}

#header .nav-list ul{

list-style: none;

position: absolute;

background-color: rgb(31, 30, 30);

width: 100vw;

height: 100vh;

left: 0;

top: 0;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

z-index: 1;

overflow-x: hidden;

}

#header .nav-list ul a{

font-size: 2.5rem;

font-weight: 500;

letter-spacing: .2rem;

text-decoration: none;

color: lime;

text-transform: uppercase;

padding: 20px;

display: block;

}

#header .nav-list ul a::after{

content: attr(data-after);

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%)scale(0);

color: rgba(240, 248, 255, 0.021);

font-size: 12rem;

letter-spacing: 45px;

z-index: -1;

transition: .3s ease letter-spacing;

}

#header .nav-list ul li:hover a::after{

transform: translate(-50%, -50%)scale(1);

letter-spacing: initial;

}

#header .hamburger{

height: 60px;

width: 60px;

display: inline-block;

border: 3px solid lime;

border-radius: 50%;

position: relative;

display: flex;

align-items: center;

justify-content: center;

z-index: 100;

cursor: pointer;

}
#header .hamburger .bar{

height: 2px;

width: 30px;

position: relative;

background-color: lime;

z-index: -1;

}

#header .hamburger .bar::after,

#header .hamburger .bar::before{

content: '';

position: absolute;

height: 100%;

width: 100%;

left: 0;

background-color: lime;

transition: .3s ease;

transition-property: top, bottom;

}

#header .hamburger .bar::after{

top: 8px;

}

#header .hamburger .bar::before{

bottom: 8px;

}

#header .hamburger.active .bar::before{

top: 0;

}

#header .hamburger.active .bar::after{

bottom: 0;

}

JS

const hamburger = document.querySelector(’#header .nav-bar .nav-list .hamburger’)

const mobile_menu = document.querySelector(’#header .nav-bar .nav-list ul’)

const header = document.querySelector(’.header.container’)

hamburger.addEventListener(‘Click’,() => {

hamburger.classList.toggle('active');

})

Do you have a question?

Hey sorry! First time here. I posted my Html Css and JS. I’m having issues getting my nav bar to function. The nav’s 3 lines aren’t merging. Whenever I click my hamburger the class doesn’t change to active.

The event type is case-sensitive. Replace ‘Click’ with ‘click’

hamburger.addEventListener(‘click’,() => { … }