Cada valor para el atributo id solo debe usarse una vez en un documento. Por lo tanto, su document.getElementById('nav-item') solo busca el primer elemento con el atributo id nav-item y actúa sobre eso. Para hacer que se muestren todos los elementos de su lista, en su lugar apliqué id="nav-item" para span todos los elementos li y eliminé la identificación de los elementos de la lista. Esto permitirá que se muestren todos los elementos de la lista cuando se haga clic en el icono del menú y no depende de que todos los elementos de la lista tengan aplicada una clase correcta. También he actualizado tu CSS en consecuencia.

Por el bien de la ilustración, también reemplacé su referencia de imagen al logotipo de Stack Overflow ya que su fragmento de código hacía referencia a un archivo local.

 const hamburger = document.getElementById('hamburger'); const navItem = document.getElementById('nav-item'); hamburger.addEventListener('click', () => { navItem.classList.toggle('show'); });

 .hamburger { cursor: pointer; padding-left: 1rem; } #nav-item li { /* updated */ display: none; } #nav-item.show li { /* updated */ display: flex; flex-direction: column; align-items: center; } ul { background-color: var(--Dark-blue); padding-top: 1rem; padding-bottom: 1rem; } @media (min-width: 750px) { .hamburger { display: none; } .nav-list { display: flex; justify-content: right; } .nav-item { display: block; } }

 <ul class="nav-list" id="nav-list"> <img class="hamburger" id="hamburger" src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg" alt="" aria-hidden="true" /> <span id="nav-item"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">Highlights</a></li> <li class="nav-item"><a href="#">Portfolio</a></li> <li class="nav-item"><a href="#">Bio</a></li> <li class="nav-item"><a href="#">Blog</a></li> <li class="nav-item"><a href="#">Contact</a></li> </span> </ul>

Cuando usa getElementById , solo le devolverá la primera coincidencia. Se espera que los ID sean únicos por uso, por lo que tiene sentido que solo obtenga el primer elemento li en su código. Aunque no entiendo por qué hizo su selección de consulta con id mientras también definió clases (que se usa para afectar al menos un elemento en contraste con id), es lo que debería haber usado.

Por cierto, debe usar clases para el mismo tipo de elementos, como sus elementos li en lugar de agregarlo también a la etiqueta ul . Evento, si fuera por estilo, el estilo que agregue a los elementos de su lista también se agregaría a su elemento ul .

Así que aquí hay un ejemplo:

 <ul class="nav-list" id="nav-list"> <img id="hamburger" src="icon-hamburger.svg" alt="HAMBURGER" aria-hidden="true" /> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">Highlights</a></li> <li class="nav-item"><a href="#">Portfolio</a></li> <li class="nav-item"><a href="#">Bio</a></li> <li class="nav-item"><a href="#">Blog</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul>

 const hamburger = document.getElementById('hamburger'); const navItems = Array.from(document.querySelectorAll('.nav-item')); hamburger.addEventListener('click', () => { console.log(navItems); // you can see your nav items in console everytime you click the button navItems.forEach(navItem => navItem.classList.toggle('show')) });

CSS es lo mismo.

Nota al margen: la respuesta de George Sun es lo que debería haber hecho. Mi respuesta es más sobre cómo debería haber usado ids/classes y recopilado múltiples elementos.