Header and primary navigation

The header identifies the service and provides its top-level navigation. It is an EST-owned component rather than a themed Bootstrap navbar, so its classes use the .est-header-* namespace.

<header class="est-header">
  <div class="est-header-inner">
    <a class="est-header-brand" href="/">
      Energy Saving Trust <span class="est-header-service-name">Advice service</span>
    </a>
    <details class="est-header-menu" open>
      <summary class="est-header-toggle">
        <span class="est-header-toggle-open">Menu</span>
        <span class="est-header-toggle-close">Close</span>
      </summary>
      <nav class="est-header-navigation" aria-label="Primary">
        <ul class="est-header-list">
          <li><a class="est-header-link" href="/" aria-current="page">Home</a></li>
          <li><a class="est-header-link" href="/advice/">Energy advice</a></li>
        </ul>
      </nav>
    </details>
  </div>
</header>

Use one short level of navigation and mark only the current destination with aria-current="page". Navigation is open in the source so it remains available without JavaScript. A small enhancement closes the native disclosure on narrow screens and keeps it open from the medium breakpoint. The summary is hidden at desktop widths.

The text brand is the portable default. Products may replace its visible contents with an approved logo asset, but the link must retain an accessible name. Search, account controls, mega-navigation, location selection and product colour themes are deliberately outside the MVP.