header.html

  <label for="brg-tr" class="brg-b">
    <div class="brg">
      <span class="brg-c">
        <span class="brg-c-i"></span>
      </span>
      <span class="brg-t"><span class="a11y--h">Toggle </span>Menu</span>
    </div>
  </label>

  <div class="lo lo--abs">
    <div class="lo-l">
      <a href="https://www.boston.gov/" title="Home | Boston.gov">
        <img src="https://patterns.boston.gov/images/public/logo.svg" alt="Home | Boston.gov" class="lo-i">
      </a>
      <span class="lo-t"><a href="https://www.boston.gov/mayor">Mayor Michelle Wu</a></span>
    </div>
  </div>
  <a id="seal" href="https://www.boston.gov/" title="Home | Boston.gov" rel="home" class="s">
  <img src="https://patterns.boston.gov/images/public/seal.svg" alt="Home | Boston.gov" class="s-i" />
</a>

<nav class="nv-h">
  <ul class="nv-h-l">
    <li class="nv-h-l-i"><a href="https://www.boston.gov/pay-and-apply" title="Pay and apply" class="nv-h-l-a">Pay and apply</a></li>
    <li class="nv-h-l-i"><a href="https://www.boston.gov/public-notices" title="Public notices" class="nv-h-l-a">Public notices</a></li>
    <li class="nv-h-l-i"><a href="mailto:feedback@boston.gov" title="Feedback" class="nv-h-l-a" onClick="document.getElementById(&quot;contactForm&quot;).show(); return false;">Feedback</a></li>
    <li class="tr nv-h-l-i">
      <a href="https://www.boston.gov/#translate" title="Translate" class="nv-h-l-a nv-h-l-a--k--s tr-link">Translate</a>
      <ul class="tr-dd">
        <li><span class="notranslate tr-dd-link tr-dd-link--message">Loading...</span></li>
        <li><a href="https://www.boston.gov/#" class="notranslate tr-dd-link" data-ln="ht">Krey&#xF2;l Ayisyen</a></li>
        <li><a href="https://www.boston.gov/#" class="notranslate tr-dd-link" data-ln="pt">Portugese</a></li>
        <li><a href="https://www.boston.gov/#" class="notranslate tr-dd-link" data-ln="es">Espa&#xF1;ol</a></li>
        <li><a href="https://www.boston.gov/#" class="notranslate tr-dd-link" data-ln="vi">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
        <li><a href="https://www.boston.gov/#" class="notranslate tr-dd-link tr-dd-link--hidden" data-ln="en">English</a></li>
      </ul>
    </li>
    <li class="nv-h-l-i">
      <label for="s-tr" title="Search" class="nv-h-l-a nv-h-l-a--k nv-h-l-a-ic" id="searchIcon">
        <svg id="Layer_2" aria-label="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 41"><title>Search</title><path class="nv-h-l-a-i" d="M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z"/></svg>
      </label>
    </li>
  </ul>
</nav>

<div class="h-s">
  <form class="sf" action="https://www.boston.gov/search" accept-charset="UTF-8" method="get">
    <input name="utf8" type="hidden" value="&#x2713;">
    <div class="sf-i">
      <input type="text" name="query" id="query" value="" placeholder="Search&#x2026;" class="sf-i-f" autocomplete="off" aria-label="Search">
      <button class="sf-i-b">Search</button>
    </div>
  </form>
</div>