Masthead

<header class="p234-masthead" style="position:static">
  <div class="p234-masthead__bar">
    <a class="p234-masthead__brand" href="#">
      <span class="p234-masthead__mark">+234</span>
      <span class="p234-masthead__tagline">Nigeria, in numbers and in context</span>
    </a>
    <nav class="p234-masthead__nav" aria-label="Main">
      <a href="#" aria-current="page">News</a>
      <a href="#">Markets</a>
      <a href="#">Cost of living</a>
      <a href="#">Elections</a>
      <a href="#">API</a>
    </nav>
    <div class="p234-masthead__actions">
      <button class="p234-masthead__icon" type="button" aria-label="Search">&#9906;</button>
      <button class="p234-masthead__icon" type="button" aria-label="Open menu">&#9776;</button>
      <a class="p234-btn p234-btn--secondary" href="#">Sign in</a>
    </div>
  </div>
  <nav class="p234-subnav" aria-label="Sections">
    <ul>
      <li><a href="#" aria-current="page">Top stories</a></li>
      <li><a href="#">Politics</a></li>
      <li><a href="#">Business</a></li>
      <li><a href="#">World</a></li>
      <li><a href="#">Sport</a></li>
      <li><a href="#">Entertainment</a></li>
    </ul>
  </nav>
</header>

What this component owns

The shape, the rules, the layering and the breakpoints. The dropdown and overlay behaviour stays in the app: this is CSS, not a menu engine.

Rules

• Keep the heavy rule under the bar. It is the masthead rule a newspaper has, and it separates the page furniture from the journalism.
• Let the nav collapse to the menu button below 992px rather than shrinking the type. The nav links already squeezed "Sign in" onto a second line once.
• Use the layering scale: the masthead is z.sticky, its dropdowns are z.dropdown, the search overlay is z.overlay.
• Give every icon-only control an aria-label.

• Do not put the whole site in the top nav. Five or six destinations; everything else lives in the menu or the footer.
• Do not stack a promo bar above it. The reader came for an article.
• Do not make it tall. It is sticky, so every pixel is taken from the article on every scroll.

Search

Search is an icon at phone and tablet widths and may expand to an inline field once there is room. Whichever it is, the control is a real <form> with a labelled input, so Enter works and a password manager is not confused by it.

The mobile menu

Built from <details> and <summary>, so it opens and closes without JavaScript and is keyboard operable for free. If the script never arrives the menu still works, which matters on the connections most of this audience is on.