I am having trouble creating the "Hamburger menu" on my website. It looks fine, but when I click on it, nothing happens.
I have set up an event listener to detect any clicks on the button and toggle the class to display or hide the ul elements accordingly.
I can't seem to figure out what's wrong with the code. Is there a simpler solution?
const bar = document.getElementById('bar');
const nav = document.getElementById('navbar');
const close = document.getElementById('close');
if (bar){
bar.addEventListener("click", () => {
nav.classList.toggle("active");
})
}
if (close) {
close.addEventListener("click", () => {
nav.classList.remove("active")
})
}@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600; 700; 800; 900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan', sans-serif;
}
h1 {
font-size: 50px;
line-height: 64px;
color: #222;
}
...
<!-- CSS Styles continue here -->
...
footer .copyright {
width: 100%;
text-align: center;
}
/*Shop Page*/
/*Single Product*/
/*Blog Page*/
/*About Page*/
/*Cart Page*/
/*Start Media Query*/
@media (max-width:799px) {
...
}
<script src="https://kit.fontawesome.com/8848882185.js"></script><section id="header" ... >