{% if site.navigation_header %} <nav class=“nav nav–header”>

<ul class="list  list--nav">
  {% for item in site.navigation_header %}

    {% if item.url contains '://' %}
      {% assign url = item.url %}
    {% else %}
      {% assign url = item.url | relative_url %}
    {% endif %}

    <li class="item  item--nav{% if item.url == page.url %}  item--current{% endif %}">
      <a href="{{ url }}">{{ item.title }}</a>
    </li>
  {% endfor %}
</ul>
<button class="button  button--nav" aria-label="Menu toggle">
  {% include icon.html id="nav" title="Menu" %}
</button>

</nav> {% else %}

{% include nav-default.html %}

{% endif %}

<script type=“text/javascript”>

// Get list and button
const navList = document.querySelector('.header .list--nav')
const button  = document.querySelector('.header .button--nav')

// Hide nav and apply toggle
const collapseNav = () => {
  if (document.body.clientWidth < 640) {
    navList.style.setProperty('--listHeight', `-${navList.offsetHeight}px`)
  } else {
    navList.removeAttribute('style')
  }

  button.onclick = () => {
    navList.style.setProperty('transition', `margin .1s`)
    if (navList.style.getPropertyValue('--listHeight')) {
      navList.style.removeProperty('--listHeight')
    } else {
      navList.style.setProperty('--listHeight', `-${navList.offsetHeight}px`)
    }
  }
}

collapseNav()

// Check on resize if to collapse nav
window.addEventListener('resize', () => {
  collapseNav()
})

</script>