<!– 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>