The Ounce › Style Guide


Site Header


The header navigation is designed to create a distinction between the narrative items (The Problem, Our Methods) and the organizational items (Who We Are, What We Do). The children of an organizational item are easily accessed via drop-down navigation.

<header class="site-header">  
  <div class="container">
    <figure class="l-header-logo">
      <img src="/ounce/assets/img/global/ounce-logo-header.svg" />
    </figure>

    <!-- Primary -->
    <div class="l-header-primary-nav">
      <nav class="header-primary-nav">
        <a href="#" class="header-primary-nav__item">The Problem</a> 
        <a href="#" class="header-primary-nav__item">Our Methods</a> 
        <a href="#" class="header-primary-nav__item">Our Impact</a> 
        <a href="#" class="header-primary-nav__item">Get Involved</a>

        <a href="#">
          <div class="search-nav">
            <i class="ss-icon search-icon">search</i></a>
          </div>
        </a>
      
        <div class="mobile-nav">
          <i class="ss-icon larger">rows</i>
        </div>

      </nav>

    </div>
  </div>

  <div class="secondary-nav-stripe">
    <div class="container">
      <!-- Secondary -->      
      <div class="l-header-secondary-nav">
        <nav class="header-secondary-nav">
          <ul class="parent">
            
            <li>
              <a href="#">Who We Are<i class="ss-icon dropdown-icon">navigatedown</i></a>
              <ul class="child">
                <li><a href="#">Leadership Staff<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Board of Directors<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Partners<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Careers<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Contact Us<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
              </ul>
            </li>

            <li>
              <a href="#">What We Do<i class="ss-icon dropdown-icon">navigatedown</i></a>
              <ul class="child">
                <li><a href="#">Initiatives<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Research<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Professional Development<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Policy/Advocacy<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
              </ul>
            </li>              
                                                                  
            <li>
              <a href="#">News<i class="ss-icon dropdown-icon">navigatedown</i></a>
              <ul class="child">
                <li><a href="#">Press Releases<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Early Education News<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Ounce in the News<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
              </ul>
            </li>  

            <li>
              <a href="#">Resources<i class="ss-icon dropdown-icon">navigatedown</i></a>
              <ul class="child">
                <li><a href="#">Publications<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Early Education Newsletter<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Videos<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Advocacy Tools<i class="ss-icon subnavigation__icon">navigateright</i></a></li>
                <li><a href="#">Parent Tools<i class="ss-icon subnavigation__icon">navigateright</i></a></li>                  
              </ul>
            </li>

            <li>
              <a href="#">Blog<i class="ss-icon dropdown-icon">navigatedown</i></a>
              <ul class="child">
                <li><a href="#">Archive<i class="ss-icon subnavigation__icon">navigateright</i></a></li>             
              </ul>
            </li>     

          </ul>
        </nav>
      </div>
   
      <div class="l-header-donate">
        <nav class="header-donate">
          <a class="btn donate" href="#">Donate Now</a>
        </nav>
      </div>
    </div>
  </div>
</header>