Bootstrap navigation logo on center - html

Question

I try to design a centered logo navigation but i have some output problems
.navbar {
background-color: #231f20;
min-height: auto;
position: relative;
top: 0px;
font-size: 13px;
width: auto;
border-bottom: none;
margin-bottom: 0px;
padding: 40px 0px;
}
.navbar-brand {
padding: 0 15px;
height: 96px;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 126px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav > li a {
padding: 0 40px;
}
}
#media (min-width: 1200px) {
.navbar-nav > li a {
padding: 0 50px;
}
}
/////
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Who We Are</li>
<li>Our Food</li>
<li class="hidden-xs"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></li>
<li>Book a Table</li>
<li>Promotions</li>
</ul>
</div>
</div>
</nav>
Also, demo at http://codepen.io/anon/pen/egqxjW
What is the problem that is causing that white space?
PS: Is there a better way to get the same result? What should i do to include the logo only once in the source code?

Answer 1

right: -50%; moved the ul 50% to the right of where it should be. Its width stay the same (100% of the container), and it's moved by 50% to the right, so 50% of the ul is outside of the container, bleeding out of screen.
I made some change to achieve the same result you want, using text-align: center and display: inline-block instead. They are marked with /* change */ in the CSS.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
.navbar {
background-color: #231f20;
min-height: auto;
position: relative;
top: 0px;
font-size: 13px;
width: auto;
border-bottom: none;
margin-bottom: 0px;
padding: 40px 0px;
}
.navbar-brand {
padding: 0 15px;
height: 96px;
}
#media (min-width: 768px) {
ul.navbar-nav {
position: relative;
float: none;
/* change */
text-align: center;
/* change */
}
ul.navbar-nav>li {
position: relative;
display: inline-block;
/* change */
vertical-align: middle;
float: none;
}
ul.navbar-nav>li a {
line-height: 126px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav>li a {
padding: 0 40px;
}
}
#media (min-width: 1200px) {
.navbar-nav>li a {
padding: 0 50px;
}
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Who We Are</li>
<li>Our Food</li>
<li class="hidden-xs">
<img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" />
</li>
<li>Book a Table</li>
<li>Promotions</li>
</ul>
</div>
</div>
</nav>

Answer 2

You have in your style a rule which is setting right: -50% on the navbar. Unfortunately, since the UL navbar displays as a block you wind up with an element that is 100% moving to the right 50% and winding up offscreen.
Instead of messing with right relative positioning you should try the navbar-right bootstrap class. Like so:
<ul class="nav navbar-nav navbar-right">
Most of the layouts from bootstrap play with floats, so you can't just use relative positioning expecting it to behave the same way.
Lastly you should compare it with the official documentation responsive navbar example here: https://getbootstrap.com/components/#navbar
You can see the resulting example here: http://codepen.io/anon/pen/NdQJRb