Untitled fiddle

HTML

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.pumpkin.min.css"
>

<header>
  <details role="menubar" aria-labelledby="menubar-title">
    <summary>
      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor" aria-hidden="true" focusable="false">
        <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
      </svg>
    </summary>
    <nav aria-label="Website navigation bar">
      <ul aria-label="Brand name">
        <li role="none">
          <strong>Acme Corp</strong>
        </li>
      </ul>
      <ul aria-label="Navigation">
        <li role="none"><a role="menuitem" href="#">About</a></li>
        <li role="none"><a role="menuitem" href="#">Services</a></li>
        <li role="none"><a role="menuitem" href="#">Products</a></li>
      </ul>
    </nav>
  </details>
</header>

CSS

details[role="menubar" i] > summary::after {
  display: none;
}

details[role="menubar" i] > summary > nav,
details[role="menubar" i] > nav > ul {
  overflow-x: auto;
}

details[role="menubar" i] > nav,
details[role="menubar" i] > nav > ul {
  flex-direction: column;
}

details[role="menubar" i] > nav > ul > li {
  flex: 0 0 auto;
}

@media (min-width: 576px) {
  details[role="menubar" i] > summary {
    display: none;
  }

  details[role="menubar" i] > nav,
  details[role="menubar" i] > nav > ul {
    flex-direction: row;
  }

  details[role="menubar" i]:not([open])::details-content {
    content-visibility: visible;
  }
}