<nav id=“mainNav” role=“navigation” class=“navbar navbar-expand-lg navbar-light bg-light nav-local fixed-top”>

<a href="{{ page.baseurl }}" class="links__no-underline navbar-brand">
  <h1 class="typography__nav-heading{% if site.nav_config.smaller_brand == true %} typography__nav-heading--smaller{% endif %}">{{ site.site_name }}</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavContent" aria-controls="mainNavContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavContent">
  <ul class="js-nav navbar-nav ml-auto">
    {% for link in site.nav_links %}
    {% if link.button == false  %}
    <li class="js-nav-item nav-item">
      <a class="nav-link links__nav-link--color typography__nav-local--nav-link" href="{% unless link.external == true %}{{page.baseurl}}{% endunless %}{{ link.link_href }}">{{ link.link_text }}</a>
    </li>
    {% elsif link.dropdown %}
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle btn btn-primary typography__nav-local--nav-link links__nav-link--color" href="#" id="{{ link.link_text | downcase }}NavbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {{ link.link_text }}
      </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="{{ link.link_text | downcase }}NavbarDropdown">
        {% for item in link.dropdown %}
        <a class="dropdown-item" href="{{ page.baseurl }}{{ item.href }}">{{ item.text }}</a>
        {% endfor %}
      </div>
    </li>
    {% else %}
    <li class="js-nav-item nav-item">
      <a href="{% unless link.external == true %}{{page.baseurl}}{% endunless %}{{ link.link_href }}" class="btn btn-primary typography__nav-local--nav-link">{{ link.link_text }}</a>
    </li>
    {% endif %}
    {% endfor %}
  </ul>
</div>

</nav>