Subtitle in nav bar + right aligned items - html

Question

I've got a nav bar with a subtitle, the subtitle uses the technique from here:
Adding a subtitle to a Bootstrap Navbar
Unfortunately, when I added the sub-title, I lost the right-alignment on my nav bar - meaning I need some items to be right aligned, and they were, but not anymore since adding the sub-title.
Any idea how I could combine nav-bar sub-title with right-align?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-column">
<div class="d-sm-flex d-block flex-nowrap">
<div class="collapse navbar-collapse">
<ul id="navbar-section-list" class="navbar-nav mr-auto">
... a bunch of li/a here to represent left aligned items
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown-item-right">
<a id="refresh-button" class="nav-link" href="#">Refresh</a>
</li>
<li class="nav-item dropdown dropdown-item-right justify-content-end">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<span id="account-info-header" class="dropdown-item-text"></span>
<a class="dropdown-item">Settings</a>
<a class="dropdown-item" href="/auth/v1/logout">Log out</a>
</div>
</li>
</ul>
</div>
</div>
<small id="navbar-node-info"></small>
</div>
</nav>
I think that right-alignment of "Refresh" and "Account" were provided by the "mr-auto" attribute on:
<ul id="navbar-section-list" class="navbar-nav mr-auto">
But sadly I have no idea why it stopped working with "flex"...
I tried adding a justify-content-end on the second ul.navbar-nav but it made no difference, still no right alignment.

Answer 1

here is the jsfiddle for your problem https://codepen.io/irinnahar/pen/JQamQy?editors=1000 you just need to add w-100 to your <div class="d-flex flex-column w-100"> class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-column w-100">
<div class="d-md-flex d-block flex-nowrap">
<div class="collapse navbar-collapse">
<ul id="navbar-section-list" class="navbar-nav mr-auto">
... a bunch of li/a here to represent left aligned items
</ul>
<ul class="navbar-nav ">
<li class="nav-item dropdown-item-right">
<a id="refresh-button" class="nav-link" href="#">Refresh</a>
</li>
<li class="nav-item dropdown dropdown-item-right justify-content-end">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<span id="account-info-header" class="dropdown-item-text"></span>
<a class="dropdown-item">Settings</a>
<a class="dropdown-item" href="/auth/v1/logout">Log out</a>
</div>
</li>
</ul>
</div>
</div>
<small id="navbar-node-info"></small>
</div>
</nav>