i was trying to make a toggle button for tablets/phones but it isn’t working. The javascript class gets called when i click the toggle button so i don’t know what is wrong…

enter image description here
enter image description here

My head where i load my js using defer function to avoid placing it at the end of the body

<script defer src="assets/js/index.js"></script>
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});
/*my toggle button propertys on desktops*/

.header .nav .nav-toggle {
  color: white;
  background: none;
  border: none;
  font-size: 1.875em;
  padding: 0 1.250em;
  line-height: 60px;
  cursor: pointer;
  display: none;
}


/*for phones*/

@media (max-width: 1024px) {
  .header .nav .nav-toggle {
    display: block;
  }
  .header .nav .nav-menu {
    flex-direction: column;
    align-items: center;
    background-color: #2c3e50;
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    height: calc(100vh - 60px);
    /*100%*/
    overflow-y: auto;
    padding: 1.250em 0;
    left: 100%;
    transition: left 0.3s;
  }
  .nav-menu_visible {
    left: 0;
  }
}
<header class="header">
  <nav class="nav">
    <a href="#" class="logo">Portafolio</a>
    <button class="nav-toggle">
            <i class="fas fa-bars"></i>
        </button>
    <ul class="nav-menu">
      <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
      <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
      <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
      <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
      <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
      <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
    </ul>
  </nav>
</header>

I don’t know why my menu isn’t moving from left 0 to left 100% (it isn’t showing :/)

2

It doesn’t work because of CSS. Your specificity of nav-menu is much more as you have declared as.

.header .nav .nav-menu    // 0 3 0

(x y x) => (id, class, tag)

Either you increase the specificity of .nav-menu_visible or decrease the specificity of .nav-menu

I decrease the specificity to 0 1 0 as

.nav-menu                // 0 1 0
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});
body {
  background-color: black;
}

.header .nav .nav-toggle {
  color: white;
  background: none;
  border: none;
  font-size: 1.875em;
  padding: 0 1.250em;
  line-height: 60px;
  cursor: pointer;
  display: none;
}


/*for phones*/

@media (max-width: 1024px) {
  .header .nav .nav-toggle {
    display: block;
  }
  .nav-menu {
    flex-direction: column;
    align-items: center;
    background-color: #2c3e50;
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    height: calc(100vh - 60px);
    /*100%*/
    overflow-y: auto;
    padding: 1.250em 0;
    left: 100%;
    transition: left 0.3s;
  }
  .nav-menu_visible {
    left: 0;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>



<header class="header">
  <nav class="nav">
    <a href="#" class="logo">Portafolio</a>
    <button class="nav-toggle">
          <i class="fas fa-bars"></i>
        </button>
    <ul class="nav-menu">
      <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
      <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
      <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
      <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
      <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
      <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
    </ul>
  </nav>
</header>