Mobile first responsive hamburger menu

hamburgerMenu.css

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

header {
  background-color: #262626;
}

/* need a solution for the next 2 properties */
li {
  list-style: none;
}

a {
  color: #fff;
  text-decoration: none;
}

.nav-bar {
  min-height: 4.375em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5em;
}

.nav-branding {
  font-size: 2rem;
  font-weight: 600;
}

.nav-menu {
  position: fixed;
  left: -100%;
  top: 3.375em;
  flex-direction: column;
  background-color: #262626;
  width: 100%;
  text-align: center;
  transition: 750ms;
}

.nav-menu.active {
  left: 0;
}

.nav-item {
  margin: 1em 0;
}

.nav-link {
  transition: 400ms ease;
}
.nav-link:hover {
  color: dodgerblue;

}

.hamburger {
  cursor: pointer;
}

.bar {
  display: block;
  background-color: #fff;
/* The following 3 properties are essential in creating the "X" when the hamburger is clicked. 
  If you change just 1 of them, then you need to find the proper combination for the other 2 */
  width: 24px;
  height: 2px;
  margin: 6px auto;
/*   The same properties but in em units */
/*   width: 1.5625em; */
/*   height: 0.1875em; */
/*   margin: 0.3125em auto; */

/*    -webkit-transition: all 300ms ease;  */
  transition: all 300ms ease-in-out;
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0
}
.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 768px) {

  .nav-menu {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    width: auto;
  }
  
  .hamburger {
    display: none;
  }
}

hamburgerMenu.html

<header>
  <nav class="nav-bar">
    <a href="#" class="nav-branding">J.K.</a>
    
    <ul class="nav-menu">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>
    
    <div class="hamburger">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
    
  </nav>
</header>

hamburgerMenu.js

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
})

// close mobile menu
document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
  hamburger.classList.remove("active");
  navMenu.classList.remove("active");
}))