<header>
  <a href="#" class="logo-icon">
    <svg height="50" width="50" xmlns="http://www.w3.org/2000/svg">
      <circle r="20" cx="25" cy="25" stroke="blue" stroke-width="3" fill="red" />
    </svg>
  </a>
  
  <button aria-controls="primary-navigation" aria-expanded="false" class="menu-toggle-button">
    <span class="visually-hidden">Menu</span>
    <svg class="hamburger-icon" width="50px" height="50px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
      <path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
      <path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
    </svg>
    <svg class="close-icon" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">
      <path d="M 7.71875 6.28125 L 6.28125 7.71875 L 23.5625 25 L 6.28125 42.28125 L 7.71875 43.71875 L 25 26.4375 L 42.28125 43.71875 L 43.71875 42.28125 L 26.4375 25 L 43.71875 7.71875 L 42.28125 6.28125 L 25 23.5625 Z"/>
    </svg>
  </button>
  
  <nav id="primary-navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Something</a></li>
    </ul>
  </nav>
</header>
* {
  padding: 0;
  margin: 0;
}

.logo-icon {
  padding-left: 0.75rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 1rem;
  padding-inline: 0.5rem;
  max-width: 1100px;
  margin-inline: auto;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
}

.menu-toggle-button {
  display: none;
}

@media (max-width: 750px) {
  ul {
    display: none;
  }
  .menu-toggle-button {
    display: block;
    position: absolute;
    z-index: 10;
    right: 1rem;
    background-color: transparent;
    padding: 1rem;
    border: 0;

    .close-icon {
      display: none;
    }
  }
  [aria-expanded="true"] {
    .close-icon {
      display: block;
    }
    .hamburger-icon {
      display: none;
    }
  }

  [aria-expanded="true"] ~ nav {
    display: block;
    position: absolute;
    inset: 0;
    width: 80%;
    margin-left: auto;
    box-shadow: 0 0 0 100vmax hsl(0 0 0 / 0.7);

    ul {
      margin-top: 20vh;
      display: grid;
      gap: 2rem;
      margin-left: max(3rem, 20vw);
    }
  }
}

/* Utility Classes */
.visually-hidden {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0;
}

const navigationToggle = document.querySelector(".menu-toggle-button");
const navigation = document.querySelector("#primary-navigation");
const navLinks = navigation.querySelectorAll("a");

if (navigationToggle && navigation) {
  navigationToggle.addEventListener("click", (event) => {
    event.stopPropagation();
    const isExpanded =
      navigationToggle.getAttribute("aria-expanded") === "true";
    navigationToggle.setAttribute("aria-expanded", !isExpanded);
    navigation.classList.toggle("open", !isExpanded);
  });

  document.addEventListener("click", (event) => {
    if (
      !navigation.contains(event.target) &&
      event.target !== navigationToggle
    ) {
      navigationToggle.setAttribute("aria-expanded", "false");
      navigation.classList.remove("open");
    }
  });

  navLinks.forEach((link) => {
    link.addEventListener("click", () => {
      navigationToggle.setAttribute("aria-expanded", "false");
      navigation.classList.remove("open");
    });
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.