Lo que pasa es que cuando intento hacerlo solo me toma solo el primer link sabiendo que todos los demás tienen las mismas clases, o sea que el primero de todos se cierra automáticamente después de ser usado pero los demás no y eso es lo que estoy intentando solucionar porque sería raro que un nav no se cerrase luego de cumplir ya con su función
Paso a adjuntar el codigo
HTML
<body>
<header class="header">
<nav class="nav">
<div class="container-nav">
<div class="container-logo">
<h2><span class="color">Leo</span>González<span class="color">.</span></h2>
</div>
<ul class="nav__list">
<li class="nav__item"><a href="#first-page" class="link">Inicio</a></li>
<li class="nav__item"><a href="#about" class="link">Sobre mi</a></li>
<li class="nav__item"><a href="#proyects" class="link">Proyectos</a></li>
<li class="nav__item"><a href="#contact" class="link">Contacto</a></li>
</ul>
<div class="toggle">
|||
</div>
</div>
</nav>
</header>
</body>
CSS
.header {
width: 100%;
position: sticky;
top: 0;
box-shadow: 0px 0px 5px 1px #00000022;
z-index: 1000;
}
.nav {
background: var(--second-color);
}
.container-nav {
margin: auto;
display: flex;
justify-content: space-around;
line-height: 80px;
}
.container-logo {
cursor: pointer;
}
.container-logo h2 {
color: var(--font-color);
font-weight: 300;
font-size: 35px;
letter-spacing: 2px;
}
.container-logo h2 .color {
color: var(--first-color);
font-weight: 700;
}
.nav__list .nav__item {
display: inline-block;
}
.nav__list .nav__item .link {
text-decoration: none;
color: var(--font-color);
font-size: 15px;
margin: 0 25px;
transition: 0.3s;
}
.nav__list .nav__item .link:hover {
color: rgba(28, 108, 173);
}
.toggle {
color: var(--font-color);
margin-right: 20px;
font-size: 30px;
transform: rotate(90deg);
cursor: pointer;
transition: 0.3s;
display: none;
}
.rotate {
transform: rotate(180deg);
}
@media screen and (max-width: 800px) {
/* Nav solo esto */
.toggle {
display: inline-block;
}
.nav__list {
position: absolute;
display: flex;
flex-direction: column;
background: #ddd;
text-align: center;
overflow: hidden;
height: calc(100vh - 80px);
width: 100%;
z-index: 100000000;
top: -100vh;
transition: 0.5s;
}
.active {
top: 80px;
}
.nav__list .nav__item:hover {
background: #aaa;
}
/* Nav solo esto */
.feed-form {
width: 350px;
}
.first-page-name {
font-size: 30px;
}
.first-page-work {
font-size: 20px;
}
}
JS
const toggle = document.querySelector(".toggle");
const links = document.querySelector(".nav__list");
const navItem = document.querySelector(".link")
toggle.addEventListener("click", () => {
toggle.classList.toggle("rotate")
links.classList.toggle("active")
})
navItem.addEventListener("click", () => {
toggle.classList.toggle("rotate")
links.classList.toggle("active")
})
Soy relativamente nuevo en esto y lo de JS fue pura lógica mía, quizá y esté muy mal pero según yo era lo que iba
Espero que me puedan ayudar y gracias jaja