How can I make the navigation menu open when clicking the hamburger menu in the first list item? I tried using JavaScript to target the `nav-list` class in the second list item, but nothing happens on click.
Initially, I had the hamburger icon and links in one list and attempted to use `display: none` for everything except the first list item. However, I ran into issues with getting `getElementsByClassName` to display the rest of the list items upon click event.
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navList = document.getElementsByClassName('nav-list')[0]
toggleButton.addEventListener('click', () => {
navList.classList.toggle('active')
})/* Nav Styling */
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
font-weight: 600;
font-size: 18px;
}
.navbar-links li {
list-style-type: none;
}
.navbar-links li a {
text-decoration: none;
color: whitesmoke;
padding: 1rem;
display: block;
}
.navbar-links li:hover {
background-color: #555;
}
.nav-icon li {
display: none;
}
/* When menu icon clicked, javascript shows nav items */
@media screen and (max-width: 740px) {
/* Responsive Navbar */
.nav-icon li {
display: block;
}
.nav-list li {
display: none;
}
.nav-list ul {
flex-direction: column;
width: 100%;
}
.nav-list li {
text-align: center;
}
.nav-list li a {
padding: .5 rem 1 rem;
}
/* For Javascript */
.nav-list.active {
display: flex;
flex-direction: column;
}
}<nav class="navbar">
<div class="navbar-links">
<ul class="nav-icon" id="nav-icon">
<li>
<a href="#" class="toggle-button">
<i class="fa fa-bars"></i>
</a>
</li>
</ul>
<ul class="nav-list">
<li><a href="index.html">HOME</a></li>
<li><a href="activities.html">SELF-HELP TOOLS</a></li>
<li><a href="conditions.html">CONDITIONS</a></li>
<li><a href="resources.html">RESOURCES</a></li>
<li>
<a href="contacts.html">CONTACT</a>
</li>
</ul>
</div>
</nav>