Navigation

The Navigation Object is a custom module with specific classes to define its elements, including the logo and nav. When a user is in a section of ACCESS NYC, the navigation item for that section gets a bolder type treatment. The Home page of ACCESS NYC features a larger logo size than the inner pages.

<nav class="o-navigation color-dark-background">
  <div class="logo-access">
    <a href="/">
      <svg class="icon icon-logo-full">
        <use xlink:href="#icon-logo-full"></use>
      </svg>
      <span class="sr-only">Access NYC</span>
    </a>
  </div>
  <nav class="o-navigation__nav nav-inline text-align-end">
    <a class="screen-desktop:hidden" href="#o-mobile-nav">Menu</a>
    <a class="hidden screen-desktop:inline-block active" href="#">Am I eligible?</a>
    <a class="hidden screen-desktop:inline-block" href="#">Programs</a>
    <a class="hidden screen-desktop:inline-block" href="#">Find help</a>
    <a class="no-underline o-navigation__search" href="#search">
      <svg aria-hidden="true" class="icon icon-ui icon-3">
        <use xlink:href="#icon-ui-search"></use>
      </svg>Search
    </a>
  </nav>
</nav>
<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>