The header is a crucial part of any AND Digital website or product.

## Main navigation
The main navigation is the nav that sits in the centre of the header.
Each header link dictates its color with a modifier `header-link--{brand-colour}`.

## Secondary navigation
The secondary navigation sits to the far right of the page, usually only a couple of links sit in this area along with
the search link.

## Mobile header
Header mobile navigation is a greatly reduced version of the header nav links, normally a menu prompt and search. Anything 
you wish to show in the header in mobile should go here along with the `header__menu-button`.

## Empty header
If your header doesn't have navigational links, you can add the modifier `header--empty`.

```html
<div class="header header--empty">
  ...
</div>
```
## Full header example

```html
<header>
  <nav class="header">
    <a href="/" class="header__logo">
      <img
        class="header__logo-image"
        src="https://static.andigital.com/new-logos/ANDigital_LOGO_LONG_RGB_ON_WHITE.png"
        alt="AND Digital logo"
      />
    </a>

    <ul class="header__main-navigation">
      <li class="header__navigation-item">
        <a class="header__link header__link--blue" href="#">
          Offerings
        </a>
      </li>
      <li class="header__navigation-item header__navigation-item--active"...>
      <li class="header__navigation-item"...>
      <li class="header__navigation-item"...>
    </ul>
    
    <ul class="header__secondary-navigation">
      <li class="header__navigation-item">
        <a href="/" class="header__link header__link--green">Blog</a>
      </li>
      <li class="header__navigation-item"...>
      <li class="header__navigation-item">
        <a href="/?s=" class="header__search">
          <i class="and-icon-search"></i>
          <span class="sr-only">Search</span>
        </a>
      </li>
    </ul>
    
    <ul class="header__mobile-navigation">
      <li class="header__navigation-item header__navigation-item--search">
        <a href="#" class="header__search">
          <i class="and-icon-search"></i>
          <span class="sr-only">Search</span>
        </a>
      </li>
      <li class="header__navigation-item header__mobile-menu">
        <button class="header__menu-button" type="button">
          <i class="and-icon-menu"></i>
        </button>
      </li>
    </ul>
  </nav>
</header>
```