Create header and dialog with navigation menu

HTML

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

<header>
  <nav role="menubar" aria-label="Website navigation bar">
    <ul aria-label="Brand name">
      <li role="none">
        <strong>Acme Corp</strong>
      </li>
      <li role="separator">
        <button command="show-modal" commandfor="dialog-navigation" aria-label="Open navigation">
          <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>
        </button>
      </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>
</header>

<dialog id="dialog-navigation">
  <article>
    <header>
      <button aria-label="Close" rel="prev" command="request-close" commandfor="dialog-navigation"></button>
      <p>
        <strong>Acme Corp</strong>
      </p>
    </header>
    <aside>
      <nav>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Products</a></li>
        </ul>
      </nav>
    </aside>
  </article>
</dialog>

CSS

nav[role="menubar" i] > ul > li[role=separator] {
  display: block;
}

nav[role="menubar" i] > ul:not(:has(li[role="separator" i])) {
  display: none;
}

@media (min-width: 768px) {
  nav[role="menubar" i] > ul > li[role=separator] {
    display: none;
  }
  nav[role="menubar" i] > ul:not(:has(li[role="separator" i])) {
    display: block;
  }
}