<head>
  <script src="https://kit.fontawesome.com/ffbd6d2f88.js" crossorigin="anonymous"></script>
</head>

<nav class="navigation">
  <div class="logo">Logo</div>
  <button class="hamburger"><i class="fa-solid fa-bars hamburger-icon"></i> </button>
  <ul class="nav-list" data-visible="false">
    <li class="nav-item">Nav 1</li>
    <li class="nav-item">Nav 2</li>
    <li class="nav-item">Nav 3</li>
    <li class="nav-item">Nav 4</li>
  </ul>
</nav>
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.navigation {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: darkslateblue;
}
.logo {
  color: white;
}
.nav-list {
  display: flex;
  gap: 1rem;
  color: white;
  transition: all 0.4s ease-in-out;
}

.nav-list[data-visible="true"] {
  transform: translateX(0);
}

.hamburger {
  position: fixed;
  top: 1rem;
  right: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: none;
}

@media screen and (max-width: 500px) {
  .navigation {
    padding-right: 0;
  }
  .nav-list {
    position: fixed;
    right: 0;
    top: -5px;
    z-index: 1000;
    transform: translateX(100%);
    flex-direction: column;
    gap: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2rem 5rem;
    color: white;
    border-radius: 10px;
    backdrop-filter: blur(4px);
  }
  .hamburger {
    display: block;
    color: white;
    z-index: 1001;
  }
}
const navbar = document.querySelector(".nav-list");
const btn = document.querySelector(".hamburger");
const hamburgerIcon = document.querySelector(".hamburger-icon");

btn.addEventListener("click", () => {
  const visibility = navbar.getAttribute("data-visible");

  if (visibility === "false") {
    navbar.setAttribute("data-visible", true);
    hamburgerIcon.classList.add("fa-rectangle-xmark");
    hamburgerIcon.classList.remove("fa-bars");
  } else {
    navbar.setAttribute("data-visible", false);
    hamburgerIcon.classList.remove("fa-rectangle-xmark");
    hamburgerIcon.classList.add("fa-bars");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.