Mobile Nav

The Mobile Nav Object is a custom module with specific classes to define its elements, including the close link, header, and navigation. It is not seen on desktop browsers but you can see it by scaling the browser down to tablet width. Click here to see a full page demonstration.

<div class="o-mobile-nav color-mid-background o-mobile-nav active" id="o-mobile-nav">
  <a class="o-mobile-nav__close js-hide-nav" href="#o-mobile-nav">close &amp; return to site<svg aria-hidden="true" class="icon icon-ui icon-3">
      <use xlink:href="#icon-ui-x"></use>
    </svg>
  </a>
  <div class="o-mobile-nav__inner">
    <h4 class="o-mobile-nav__header">Get help now</h4>
    <nav class="nav-block">
      <a class="active" href="#">Am I eligible?</a>
      <a href="#">Programs</a>
      <a href="#">Find help</a>
      <a class="no-underline" href="#search">
        <svg class="icon icon-ui icon-3">
          <use xlink:href="#icon-ui-search"></use>
        </svg>Search
      </a>
    </nav>
  </div>
</div>