Having some trouble with the code not working in responsive mode. I've tested it on a 600px screen and the hamburger button doesn't seem to work (I click it and nothing happens). I've gone through both the CSS and JS multiple times but can't seem to figure out the problem. It's possible that as a beginner, I might not be able to spot what's wrong even when looking directly at it. Any provisional view or assistance would be greatly appreciated.
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
font-family: "Calibri Light";
}
.brand-title {
font-size: 2rem;
margin: 0.5rem;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.navbrar-links li {
list-style: none;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding: 1rem;
display: block;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
@media (max-width: 600px) {
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links li {
text-align: center;
}
.navbar-links li a {
padding: 0.5rem 1rem;
}
.navbar-links:active {
display: flex;
}
}
/* Full navbar menu */<!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">
<title>Document</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<nav class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<script src="/scrpit.js"></script>
</body>
</html>