What is the best way to create a responsive navigation bar using HTML?

<!-- BEGIN COPY / PASTE -->
    <nav>
      <ul class="navbar">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <style>
      .navbar {
        display: flex;
        list-style-type: none;
        padding: 0;
      }
      .navbar li {
        margin-right: 20px;
      }
      .navbar a {
        text-decoration: none;
        color: black;
      }
      @media (max-width: 600px) {
        .navbar {
          flex-direction: column;
        }
        .navbar li {
          margin-bottom: 10px;
        }
      }
    </style>
    <!-- END COPY / PASTE -->