Bootstrap Navbar - align items to the middle - html

Question

I am trying to create a navbar with Bootstrap, with 'navbar-brand' on the left, navbar items centered in the middle, and 2 items on the right too. First I tried to make it from scratch but I couldn't achieve making it responsive enough.
Then, I found this approach on Bootply, which is really close to the one I want with all responsiveness and navbar collapsing. However, I want to swap navbar-brand and left items; brand to be on the left, with left items in the middle; and right items keep their position.
[ Navbar-Brand Home | About | Contact | Address Right, Right]
What is the best, most convenient way to achieve it?
Here is the Snippet:
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div>
</nav>

Answer 1

You can use CSS Positioning on .navbar-left and make it in the center using CSS transform (limit it to be on tablets & desktop so that it would not affect mobile layout).
Have a look at the snippet below (use full screen):
.navbar-brand {
position: absolute;
width: auto;
left: 15px;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
/* On Tabs & Desktops */
#media screen and (min-width: 768px) {
.navbar-left {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div>
</nav>
Hope this helps!

Answer 2

You can also try this:
#media screen and (min-width: 768px) {
.navbar-collapse {
position: relative;
}
.navbar-left {
position: absolute;
width: 100%;
text-align: center;
top: 0;
left: 0;
}
.navbar-left > li > a {
display: inline-block;
}
.navbar-left > li {
display: inline;
float: none;
}
}
Codepen: https://codepen.io/anon/pen/GNYNey