How do I create a responsive navigation menu in HTML?

<!-- BEGIN COPY / PASTE -->
    <nav class="navbar">
      <ul class="nav-list">
        <li class="nav-item"><a href="#home">Home</a></li>
        <li class="nav-item"><a href="#about">About</a></li>
        <li class="nav-item"><a href="#services">Services</a></li>
        <li class="nav-item"><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <style>
      .navbar {
        display: flex;
        justify-content: space-between;
        background-color: #333;
        padding: 10px;
      }
      .nav-list {
        list-style-type: none;
        display: flex;
        margin: 0;
        padding: 0;
      }
      .nav-item {
        margin-right: 20px;
      }
      .nav-item a {
        color: white;
        text-decoration: none;
      }
      @media (max-width: 600px) {
        .nav-list {
          flex-direction: column;
          display: none;
        }
        .navbar.active .nav-list {
          display: flex;
        }
      }
    </style>
    <script>
      document.querySelector('.navbar').addEventListener('click', function() {
        this.classList.toggle('active');
      });
    </script>
    <!-- END COPY / PASTE -->