<div class="fixed contain-to-grid">
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1>
          <a href="{{ "/" | relative_url }}" style="height:100%">
            <img src="{{ "/img/octave-logo.svg" | relative_url }}" style="width: 32px; height: auto"/>
            {{ site.title }}
          </a>
        </h1>
      </li>
      <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
      <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        {% for page in site.pages %}
          {% if page.menu %}
            <li>
              <a href="{{ page.url | relative_url }}">{{ page.title }}</a>
            </li>
          {% endif %}
        {% endfor %}
        <li>
          <a href="{{site.docs_url}}">Docs</a>
        </li>
      </ul>
    </section>
  </nav>
</div>