The alignment of the navigation is causing a bit of confusion. I've attempted to set the links to navbar-brand, but while this centers them, it also causes other elements to shift slightly downward. Additionally, it's puzzling why the select option is horizontally aligned with the navbar-brand while the links are not.
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/">Payload Examples</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
{% if session['name'] %}
<li class="nav-item active">
<a class="nav-link" style="cursor: default;" href="#" >Oauth Type: {{ session['auth_type'] }} </a>
</li>
<li>
<a class="nav-link" href="{{ url_for('logout') }}" id="logout"
data-busy="href">Logout <span class="sr-only">(current)</span></a>
</li>
{% else %}
<li>
<label for='submit-form' class="nav-link" >Login</label> <span class="sr-only">(current)</span>
</li>
</ul>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="navbar-brand" style="cursor: default;" href="#">Choose OAuth Scheme:</a></li>
<form action="{{ url_for('login') }}" method="POST"><select class="form-control" id="authType" name="authType">
<option>Auth</option>
<option>Grant</option>
<option disabled>Code</option>
</select>
<input type="submit" id="submit-form" class="hidden" />
</form>
<li>
<a class="nav-link mr-auto" target=_BLANK href="https://example.com/help">❔</a>
</li>
</ul>
</ul>
</div>
{% endif %}
</ul>
{% if session['name'] %}
<span class="navbar-text">
Welcome {{ session['name'] }}
</span>
{% endif %}
</div>
</nav>