Need centered Logo with top fixed navigation bootstrap - html

Question

I need Centered Logo with Bootstrap fixed top navigation. Means Brand should be come at center of navigation.
My Sample Fiddle
.LandPageNavLinks {
list-style-type:none;
margin:0;
padding:0;
}
.LandPageNavLinks > li {
float:left;
padding:15px;
margin-right:20px;
}
.LandPageNavLinks > li > a{
color:blue;
}
.LandPageNavLinks > li > a:hover {
text-decoration:none;
}
.navbar {
background:lightgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand CenterdLogo" href="#">Brand</a>
</div>
<div class="navbar-header pull-right">
<ul class="LandPageNavLinks">
<li>
Sign Up
</li>
<li>
Log In
</li>
</ul>
</div>
</div>

Answer 1

.LandPageNavLinks {
list-style-type:none;
margin:0;
padding:0;
}
.LandPageNavLinks > li {
float:left;
padding:15px;
margin-right:20px;
}
.LandPageNavLinks > li > a {
color:blue;
}
.LandPageNavLinks > li > a:hover {
text-decoration:none;
}
.navbar {
background:lightgray;
}
.CenterdLogo {
position: absolute;
transform: translateX(-50%);
left: 50%;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
<a class="navbar-brand CenterdLogo" href="#">Brand</a>
<div class="navbar-header pull-right">
<ul class="LandPageNavLinks">
<li>
Sign Up
</li>
<li>
Log In
</li>
</ul>
</div>
</div>

Answer 2

this is alternate solution for it.
.LandPageNavLinks {
list-style-type:none;
margin:0;
padding:0;
}
.LandPageNavLinks > li {
float:left;
padding:15px;
margin-right:20px;
}
.LandPageNavLinks > li > a{
color:blue;
}
.LandPageNavLinks > li > a:hover {
text-decoration:none;
}
.navbar {
background:lightgray;
position:relative;
}
.navbar-brand {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand CenterdLogo" href="#">Brand</a>
</div>
<div class="navbar-header pull-right">
<ul class="LandPageNavLinks">
<li>
Sign Up
</li>
<li>
Log In
</li>
</ul>
</div>
</div>

Answer 3

i tried to fix this, it may helps you.
.navbar-header.pull-left{
float:none !important;
}
.navbar-header.pull-right{margin-top: -21px;}
a.navbar-brand.CenterdLogo{float:none;}
.LandPageNavLinks{
list-style-type:none;
margin:0;
padding:0;
}
.LandPageNavLinks > li{
float:left;
padding:15px;
margin-right:20px;
}
.LandPageNavLinks > li > a{
color:blue;
}
.LandPageNavLinks > li > a:hover{
text-decoration:none;
}
.navbar{
background:lightgray;
}
.navbar-header.pull-left{
float:none !important;
}
.navbar-header.pull-right{margin-top: -21px;}
a.navbar-brand.CenterdLogo{float:none;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
<div class="navbar-header text-center pull-left">
<a class="navbar-brand CenterdLogo" href="#">Brand</a>
</div>
<div class="navbar-header pull-right">
<ul class="LandPageNavLinks">
<li>
Sign Up
</li>
<li>
Log In
</li>
</ul>
</div>
</div>