Responsive bootstrap nav with a brand logo in the middle - css

Question

I want a responsive navbar with 4 links and a brand logo in the middle. I want the navbar centered in the middle of the browser. But I'm having trouble executing that layout.
How can I achieve it?
.navbar-header {
min-height: 150px;
}
.navbar {
background: transparent;
min-height: 113px;
top: 0px;
font-size: 18px;
width: auto;
border: none;
padding: 0px 0px;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-brand {
padding: 0 15px;
height: 113px;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 113px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav > li a {
padding: 0 48px;
}
}
#media (min-width: 1200px) {
.navbar-nav > li a {
padding: 0 68px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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">Navigation ein-/ausblenden</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="images/brand.png" alt="Brand" width="310" />
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Start
</li>
<li>Idee
</li>
<li class="hidden-xs">
<a href="#">
<img src="images/brand.png" alt="Brand" width="310" />
</a>
</li>
<li>Leistungen
</li>
<li>Kontakt
</li>
</ul>
</div>
</div>
</nav>

Answer 1

I hope this will help
.navbar-header {
min-height: 150px;
}
.navbar {
background: transparent;
min-height: 113px;
top: 0px;
font-size: 18px;
width: auto;
border: none;
padding: 0px 0px;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-brand {
padding: 0 15px;
height: 113px;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 113px;
vertical-align: middle;
padding: 0 24px;
}
}
#media (min-width: 992px) {
.navbar-nav > li a {
padding: 0 48px;
}
}
#media (min-width: 1200px) {
.navbar-nav > li a {
padding: 0 68px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid text-center">
<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">Navigation ein-/ausblenden</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="images/brand.png" alt="Brand" width="310"/></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Start</li>
<li>Idee</li>
<li class="hidden-xs"><img src="images/brand.png" alt="Brand" width="310" /></li>
<li>Leistungen</li>
<li>Kontakt</li>
</ul>
</div>
</div>
</nav>
</div>

Answer 2

I suggest you to don't edit bootstrap styles, use your own class.
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}