<!– displays the main desktop and the main mobile navigation menu –> <nav>

<ul class="desktop-nav">
  <!-- displays every site with the value 'main' for it's variable 'nav' in the main navigation, sorted by their values in 'nav-position' -->
  {% assign sorted_pages = site.pages | sort:"nav-position" %}
  {% for item in sorted_pages %}
    {% if item.nav == 'main' %}
      <li {% if item.url == page.url %} class="active" {% endif %}>
        <a href="{{ item.permalink }}">{{ item.title }}</a>
      </li>
    {% endif %}
  {% endfor %}

  <!-- button to toggle the menu on mobile devices -->
  <li class=" mobile menu-button">
    <div class="menu-button-container">
      <div class="menu-button-line" id="line-1"></div>
      <div class="menu-button-line" id="line-2"></div>
      <div class="menu-button-line" id="line-3"></div>
    </div>
  </li>

</ul>

</nav>

<!– the content of the mobile menu, which is only shown after a click on the mobile menu button –> <div class=“mobile-nav-content”>

<ul>
  <!-- displays every site with the value 'main' for it's variable 'nav' in the main navigation, sorted by their values in 'nav-position' -->
  {% assign sorted_pages = site.pages | sort:"nav-position" %}
  {% for item in sorted_pages %}
    {% if item.nav == 'main' %}
      <li {% if item.url == page.url %} class="active" {% endif %}>
        <a href="{{ item.permalink }}">{{ item.title }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

</div>