<div class='contain-to-grid sticky transparent'>
  <nav class='top-bar' data-options='sticky_on: large' data-topbar=''>
    <ul class='title-area'>
      <li class="">
        <h1>
          <a href='{{site.baseurl}}/'><img src="/images/logo.svg" width="180.7px" height="56.5px alt="Ura Logo">
          </a>
        </h1>
      </li>
    </ul>
    <div id="menu-toggler" class="right">
      <a href='#'>
        <i class="icon-arrows-hamburger-2"></i>
      </a>
    </div>
    <section class='top-bar-section closed'>
      <ul class='right'>

        {% for item in site.data.nav %}
          {% if item.section_id == page.section_id %}
            {% assign active_class = "active" %}
          {% else %}
            {% assign active_class = "" %}
          {% endif %}

          {% if item.children %}
            <li class="has-dropdown {{active_class}}">
              <a href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
              <ul class='dropdown'>
                {% for child in item.children %}
                  <li>
                    <a href="{{site.baseurl}}/{{ child.path }}">{{ child.name }}</a>
                  </li>
                {% endfor %}
              </ul>
            </li>
          {% else %}
            <li class="{{active_class}}">
              <a href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
            </li>
          {% endif %}
        {% endfor %}

      </ul>
    </section>
  </nav>
</div>