Headers

The <header> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

<header> by Mozilla Contributors is licensed under CC-BY-SA 2.5.

The Delta Design System uses the Headroom JavaScript widget to slide the header (and the header navigation) out of view when users scroll down, and then slide it back into view whenever the user scrolls up. This enables us to bring the header into view when appropriate and give focus to our content the rest of the time.

On smaller screens, the navigation in the <header> is hidden outside the browser window using transform: translateX. The navigation comes into view when the user clicks the hamburger icon toggle. On screens larger than 48rem the header navigation changes to a flex row.

html

<header>
  <div class="logo">
    <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 796"><defs><style>.cls-1{fill:#01232d;}.cls-2{fill:#013342;}</style></defs><title>delta-design-system-logo</title><polygon class="cls-1" points="512 796 1024 796 512 0 512 796"/><polygon class="cls-2" points="0 796 512 796 512 0 0 796"/></svg>
    </a>
  </div>
  <nav aria-labelledby="header-navigation">
    <button class="menu-toggle" aria-expanded="false" aria-controls="header-navigation">
      <svg class="menu-toggle-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></svg>
      <svg class="menu-toggle-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
    </button>
    <ul id="header-navigation">
      <li><a href="#">About</a></li>
      <li><a href="#">Atoms</a></li>
      <li><a href="#">Molecules</a></li>
      <li><a href="#">Organisms</a></li>
      <li><a href="#">Style</a></li>
      <li><a href="#">Downloads</a></li>
    </ul>
  </nav>
</header>

script

$('button.menu-toggle svg.menu-toggle-open').click(function() {
  $('nav').addClass('open');
  $('body').addClass('open');
  $('header .logo').addClass('open');
  $('button.menu-toggle').attr('aria-expanded',true);
  $('nav ul').attr('aria-hidden',false);
});
$('button.menu-toggle svg.menu-toggle-close').click(function() {
  $('nav').removeClass('open');
  $('body').removeClass('open');
  $('header .logo').removeClass('open');
  $('button.menu-toggle').attr('aria-expanded',false);
  $('nav ul').attr('aria-hidden',true);
});
window.onload = function() {
  if($(window).width()>768) {
    $('nav ul').attr('aria-hidden',false);
  }
};