<header class="yale-header">
        <div class="topper-logo row">
            <div class="columns">
                <a class="y-icons y-yale y-univ" href=
                "http://www.yale.edu/"><span class="show-for-sr">Yale
                University</span></a>
            </div>
        </div>
        <div class="top-bar-container">
            <div class="top-bar row columns">
                <div class="top-bar-title">
                    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
                    <button class="menu-icon dark" type="button" data-toggle></button>
                    </span>Site Title
                </div>
                <div id="responsive-menu">
                    <div class="top-bar-left">
                        <ul class="dropdown menu" data-dropdown-menu>
                            <li><a href="#">One</a>
                              <ul class="menu vertical">
                                <li><a href="#">One</a></li>
                                <li><a href="#">Two</a></li>
                                <li><a href="#">Three</a></li>
                              </ul>
                            </li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                        <ul>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><input type="search" placeholder="Search"></li>
                            <li><button type="button" class="small button">Search</button></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>
    

    <footer class="yale-footer">
         <div class="footer-logo row">
           <div class="column small-4">
               <a class="y-icons y-yale y-mark" href=
               "http://www.yale.edu/"><span class="show-for-sr">Yale
               </span></a>
           </div>
    
           <div class="column small-8" align="right">
           <ul>
             <li><a href="http://usability.yale.edu">Usability &amp; Web Accessibility</a></li>
             <li><a href="http://identity.yale.edu/web">Web Identity Guidelines</a></li>
             <li><a href="mailto:ux@yale.edu" class="mailto">ux@yale.edu<span class="show-for-sr"> (link sends e-mail)</span></a></li>
           </ul>
           </div>
    
    </footer>