{% assign page_paths = site.header_pages %}

<header role=“banner”>

<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="responsive-menu">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">
        <a href="/">
          {% unless site.logo == nil %}
            <img src="{{ site.logo }}" alt="{{site.title | escape }}" width="{{ site.logo_width | default: '140px' }}">
          {% else %}
            {{ site.title | escape }}
          {% endunless %}
        </a>
      </li>
    </ul>
  </div>
  {% if page_paths %}
    <div class="top-bar-right">
      <ul class="menu">
        {% for path in page_paths %}
          {% assign my_page = site.pages | where: "path", path | first %}
          {% if my_page.title %}
            <a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
          {% endif %}
        {% endfor %}
      </ul>
    </div>
  {% endif %}
</div>

</header>