I want the nav menu to open when the hamburger menu in the first ul is clicked. I used JavaScript to target the nav-list class in the 2nd ul but when I click, nothing happens.
I initially had the hamburger icon and links in one list and tried using display: none for everything except the first li item but realized I couldn't get the getElementsByClassName to show the rest of the li items on click.
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>Is this is what you want : When you click on menu icon(here have given as A) list configuration changes from row to column on subsequent clicks .
Then you should (not only because of above said) but display: none on nav-list not on nav-list li as in your JavaScript function you are toggling active on nav-list not on nav-list li .
It is your call either change CSS or change JavaScript function
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: lightblue;
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 {
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">A</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>