Bootstrap 4.1 offers a great way to create a Navbar with multiple menu items, but I'm struggling to right justify three specific menu items within the Navbar. I've tried different methods, including using align-self-end, justify-content-end, and navbar-right, but none seem to be working as expected.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"></div>
</div>
</div>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<div class="row" >
<a class="navbar-brand" href="#">MyNNS</a>
<!-- 'Hamburger' - Shown When Menu is on Small Width Screen -->
<button class="navbar-toggler collapsed" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation Bar Menu Items -->
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link menuItemHover active" id="Departments" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Departments</a></li>
<li class="nav-item">
<a class="nav-link menuItemHover active" id="Resources" data-toggle="modal" data-target="#MyNNSModal" onclick="showResourceHeader()">Resources</a></li>
<li class="nav-item">
<a class="nav-link menuItemHover active" id="Procedures" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Procedures</a></li>
<li class="nav-item">
<a class="nav-link menuItemHover active" id="News" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">News</a></li>
</ul>
</div>
<div class="d-flex align-self-end">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link menuItemHover active" id="Newsfeed" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Newsfeed</a></li>
<li class="nav-item">
<a class="nav-link menuItemHover active" id="OneDrive" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">OneDrive</a></li>
<li class="nav-item">
<a class="nav-link menuItemHover active" id="Sites" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Sites</a></li>
</ul>
</div>
</div>
</div>
</nav>If you're interested in seeing my attempt at solving this issue, check out my JSFiddle Code Example here: https://jsfiddle.net/tsmolskow/aq9Laaew/283001/