Boostrap Navbar brand on left and links centered - css

Question

I followed this code having the left brand and center links :
.flex-fill {
flex:1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">Brand</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
When I try to push the brand a bit farther to the right the links are also moved to center in the remaining space.
Is there a way that I can move the brand further to the right and still have the links centered in the whole width of the window rather then the remaining space to the right of the brand?

Answer 1

By applying position: absolute to the "Brand" span so you can move it independently from the menu, also removing the useless div spacer and the d-flex classes because the navbar class is already using display : flex by default, I have applied a margin-left of 3rem to the "Brand" span with the help of bootstrap's ml-5 class helper just for demo purpose (you can set your own margin at your convenience).
Code below :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.flex-fill {
flex:1;
}
</style>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand position-absolute ml-5">Brand</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center flex-fill">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>