I have created a hamburger menu for my navigation bar to be responsive once the page is resized on a phone/tablet. When I click on the menu bars, there is no menu that shows. I have tried to change the the querySelector for the nav-link to querySelectorAll but the menu still doesn't open Here is my code:
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
})
document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}))* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background-color: #2c3e50;
color: #f1eeec;
text-align: center;
padding: 1em 0;
}
nav {
background-color: #34495e;
color: #ecf0f1;
padding: 0.5em;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
nav a {
text-decoration: none;
color: #ecf0f1;
}
.navbar {
min-height: 70x;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-link {
transition: 07s ease;
}
.nav-link:hover {
color: dodgerblue;
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3 ease-in-out;
transition: all 0.3 ease-in-out;
background-color: white;
}
@media(max-width:768px) {
.hamburger {
display: block;
}
.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: #2c3e50;
width: 100%;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 16px 0;
}
.nav-menu .active {
left: 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home </title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="Favicon/favicon.ico" />
</head>
<body>
<header>
<h1>Tallinn University HCI Hub</h1>
<p>Connecting the World of Human-Computer Interaction</p>
</header>
<nav class="navbar">
<ul class="nav-menu">
<li class="nav-item"><a href="events.html" class="nav-link">Events</a></li>
<li class="nav-item"><a href="speakers.html" class="nav-link">Speakers</a></li>
<li class="nav-item"><a href="testimonials.html" class="nav-link">Testimonials</a></li>
<li class="nav-item"><a href="meme.html" class="nav-link">UniMeme Mingles</a></li>
<li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="shop.html" class="nav-link">UniStyle Event Shop</a></li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<section id="about-us">
<div class="index-container">
<h2>About Us</h2>
<p>Welcome to the Tallinn University Human-Computer Interaction Hub! Our mission is to provide a vibrant platform for HCI enthusiasts, students, and professionals to connect, learn, and thrive. Explore the exciting world of HCI with us!</p>
<p>At the heart of our community is a commitment to collaborate, innovate, and share knowledge. We believe in the power of human-computer interaction to shape the future of technology and enhance the way we live and work.</p>
<p>Our diverse community includes students, researchers, industry professionals, and anyone passionate about HCI. Whether you're just starting your journey in HCI or are an experienced practitioner, there's a place for you in our hub.</p>
<p>Join us in creating a dynamic environment where ideas are exchanged, skills are honed, and meaningful connections are made. Together, let's push the boundaries of HCI and make a positive impact on the world.</p>
<img src="images/smartworks-coworking-cW4lLTavU80-unsplash.jpg" alt="About Us Image" style="max-width: 100%; height: auto;">
</div>
</section>
<section id="highlights">
<div class="index-container">
<h2>Highlights</h2>
<div class="highlight">
<div class="highlight-content">
<h3>Upcoming Events</h3>
<p>Stay updated on the latest events in the field of HCI.</p>
</div>
</div>
<div class="highlight">
<div class="highlight-content">
<h3>Featured Speakers</h3>
<p>Learn from industry experts and thought leaders.</p>
</div>
</div>
<div class="highlight">
<div class="highlight-content">
<h3>Meetup Rooms</h3>
<p>Connect with like-minded individuals in our meetup spaces.</p>
</div>
</div>
<div class="highlight">
<div class="highlight-content">
<h3>Networking Opportunities</h3>
<p>Expand your network within the HCI community.</p>
</div>
</div>
<div class="highlight">
<div class="highlight-content">
<h3>Mentoring Program</h3>
<p>Engage in mentorship to enhance your HCI journey.</p>
</div>
</div>
<div class="highlight">
<div class="highlight-content">
<h3>Hub Blog</h3>
<p>Explore insightful articles and updates in our blog section.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="index-container">
<p>© 2023 Tallinn University HCI Hub</p>
</div>
</footer>
<script src="index.js"></script>
</body>
</html>
This doesn't mean what you think it means:
This is looking for any element with the class
activeinside of any element with the classnav-menu. What you want to target is a single element which has both classes:Note the lack of space between them.