Site header

The persistent town header — identity, primary nav, search, skip link.

Show the markup

<header class="cc-site-header">
  <a class="cc-skip-link" href="#main">Skip to main content</a>
  <a class="cc-site-header__home" href="#">
    <span class="cc-site-header__mark" aria-hidden="true">R</span>
    Town of Riverbend
  </a>
  <nav class="cc-site-header__nav" aria-label="Primary">
    <a href="#" aria-current="page">Services</a>
    <a href="#">Departments</a>
    <a href="#">News</a>
    <a href="#">Search</a>
  </nav>
  <button class="cc-mobile-menu__toggle cc-site-header__menu" type="button"
          aria-haspopup="dialog" aria-controls="hdr-menu">Menu</button>
</header>
<dialog class="cc-mobile-menu" id="hdr-menu" aria-label="Menu">
  <div class="cc-mobile-menu__bar">
    Menu <button type="button" data-close>Close</button>
  </div>
  <nav aria-label="Primary">
    <ul>
      <li><a href="#">Services</a></li>
      <li><a href="#">Departments</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Search</a></li>
    </ul>
  </nav>
</dialog>

Accessibility

The current page is marked with a solid white 4px underline and bolder text; hover uses a lighter underline and a subtle fill, so the two states are never confusable and the indicator clears 3:1 on the header (1.4.11).
The skip link is the first focusable thing in the header (2.4.1).
The home link carries the town name in text; the mark is decorative.
Current section uses aria-current="page" plus the accent underline — never color alone.
Below 64rem the nav bar is replaced by the Menu button. Put the toggle in the header and the dialog after it. The in-page Subnav has its own mobile section menu; its links are not removed or moved into the site header.
Nothing decided this before, so a consumer that shipped only the bars got a nav that wrapped to six rows on a phone — no overflow, no axe violation, just unusable. See the Mobile menu for the dialog's own behaviour.
cc-site-header--contained keeps the band full-bleed but caps the content row at the container measure — use it on sites whose main content is containered.