Build a responsive CSS header with a native menu

Design around the available space

A header needs room for its brand, destination labels and primary action. The width available to it may be smaller than the browser viewport, especially when it sits inside a demo, sidebar or embedded layout. The header module establishes a named inline-size container so its children can respond to the space they actually have.

Load the core and header module

Load styloft.min.css followed by header.min.css, or use the standalone headers pack by itself. The sl-header wrapper establishes the container; sl-header__row arranges the brand and desktop menu. The action uses the ordinary sl-btn class, so its label and destination are present as normal HTML. Replace the sample paths with destinations belonging to your own site.

Try the working example

Edit the HTML or change preview width to explore the behavior.

Live preview

North studio

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="sl-header">
  <div class="sl-header__row">
    <a class="sl-header__brand" href="/light/">North studio</a>
    <nav class="sl-header__menu" aria-label="Studio desktop navigation">
      <a href="/light/guides/">Our process</a>
      <a class="sl-btn" href="/light/getting-started/">Start a project</a>
    </nav>
    <details class="sl-header__mobile">
      <summary>Menu <span aria-hidden="true">+</span></summary>
      <nav class="sl-header__mobile-nav" aria-label="Studio mobile navigation">
        <a href="/light/guides/">Our process</a>
        <a class="sl-btn" href="/light/getting-started/">Start a project</a>
      </nav>
    </details>
  </div>
</header>

HTML source · enable JavaScript for the playground16 lines · UTF-8

Provide the narrow-container menu

The native details control contains a second navigation list with the same destinations. Below 44rem of header-container width, the module hides desktop navigation and displays the Menu disclosure. Keep the two lists synchronized when editing your site; only the visible version should participate in keyboard navigation. The summary supplies the open/closed control without requiring component JavaScript.

Test beyond one phone size

Resize the preview and also test with doubled text, long labels and right-to-left content. Use a short, recognizable brand label and avoid forcing every item onto a single line. Tab through the active navigation and verify the hidden list does not receive focus. Opening transitions depend on newer details-content support, but opening the links must not depend on animation. If a target browser lacks container-query support, evaluate the wide layout as a fallback or supply your own breakpoint adaptation.

Check your result

Switch the preview width to 375 pixels and open Menu.
Use Tab and Enter to follow a destination without a mouse.
Check that the brand remains readable when the menu is open.

Browser reference: MDN documentation. See the project browser-support notes before depending on newer enhancements.