<nav id=“navbar” class=“no-select”> <div class=“container”> {% for item in site.navigation %}

<a {% if page.url == item.link %}class="current"{% else %}href="{{ site.url }}{{ item.link }}"{% endif %}>{{ item.name }}</a>

{% endfor %} <input type=“checkbox” id=“dark-toggle-box”> <label for=“dark-toggle-box” id=“dark-toggle-label”>

{% if site.font-awesome-kit %}
    <i class="fas fa-adjust"></i>
{% else %}
    <svg class="icon"><use xlink:href="#icon-adjust-solid"></use></svg>
{% endif %}

</label> </div> </nav> <script type=“text/javascript”>

const navbar = document.querySelector('#navbar');
const nav_init = navbar.offsetTop;
window.addEventListener('scroll', function() {
    if (this.scrollY >= nav_init) {
        navbar.classList.add("sticky");
    } else {
        navbar.classList.remove("sticky");
    }
})

</script>