<nav class=“navbar navbar-expand-md navbar-dark bg-primary”>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="{{ '/' | relative_url }}"> {{ site.brand }} </a> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> {%- for navlink in site.header_links -%} <li class="nav-item"> <a href="{{ navlink.url }}" {% if navlink.target %} target="{{ navlink.target }}" rel="noopener noreferrer"{%- endif -%} class="nav-link active"> {%- if navlink.fa_class -%} <i class="{{ navlink.fa_class }} fa-lg"></i> {%- endif %} {{ navlink.text }} </a> </li> {%- endfor -%} <!-- Sidebars do not work well on smaller devices. We want to fall back to a more traditional expanding button navigation --> <li class="nav-item dropdown d-sm-block d-md-none"> <a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu </a> <div class="dropdown-menu" aria-labelledby="smallerscreenmenu"> {%- for navPage in site.pages | where: "path" -%} <a class="dropdown-item" href="{{ navPage.url || relative_url }}">{{ navPage.title }}</a> {%- endfor -%} </div> </li> </ul> </div>
</nav>