<header id="site-header" class="top-bar">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <img id="popmenu" src="{{ site.baseurl }}/assets/images/logo.png">
      </div>
      <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
        <a href="{{ site.baseurl }}/"><h1 class="text-center title">{{ site.title }}</h1></a>
      </div>
    </div>
    <div class="col-xs-0 col-sm-0 col-md-7 col-lg-7">
      <nav>
        <ul class="text-center">
            {% for category in site.categories %}
                <li><a href="/category/{{ category[0] }}/">{{ category[0] | capitalize }}</a></li>
            {% endfor %}
            <li><a class="donate-button" href="https://secure.codeforamerica.org/page/contribute/default?brigade=CodeForFoCo">Donate</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

{% include popup-menu.html %}

<header id="site-header" class="top-bar">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      </div>
      <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
          <h1 class="text-center title">
            <a href="{{ site.baseurl }}/">
                <img id="popmenu" src="{{ site.baseurl }}/assets/images/logo.png">{{ site.title }}
            </a>
          </h1>
      </div>
    </div>
    <div class="col-xs-0 col-sm-0 col-md-7 col-lg-7">
      <nav>
        <ul class="text-center">
            {% for category in site.categories %}
                <li><a href="/category/{{ category[0] }}/">{{ category[0] | capitalize }}</a></li>
            {% endfor %}
            <li><a class="donate-button" href="https://secure.codeforamerica.org/page/contribute/default?brigade=CodeForFoCo">Donate</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

{% include popup-menu.html %}

Improve validity and flexibility of site logo markup
Improve validity and flexibility of site logo markup
