My goal is to achieve the following using the Bootstrap 4 Navbar:
I am looking to center the nav-links/items in the middle of the viewport using flexbox or .mr-auto utilities. I prefer to avoid a CSS-based positioning approach as it may not be consistent across different devices. However, if a CSS approach ensures the same centralized position, I am open to it!
NOTE: Some people might suggest using justify utilities, but the issue is that you can't use them directly with .navbar-brand and .navbar-nav without causing layout issues.
<nav class="navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/nav-logo.png" alt="logo" class="nav-logo"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>