rookie rookie - 5 months ago 35
CSS Question

Centering bootstrap navbar hamburger

It's pretty easy to center the links in a bootstrap navbar (see fiddle in one of the responses to similar questions, here).

How can one center the collapsed "hamburger" so that it appears in the center of the navigation bar as well?

For refernece, the relevant code is below:

<style>
@media (min-width:768px) {
/* centered navigation */
.nav.navbar-nav {
float: left;
}

.nav.navbar-nav {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}

.nav.navbar-nav > li {
position: relative;
right: 50%;
}

.nav.navbar-nav li {
text-align: left
}
}
</style>

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Posts</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

Answer

Center "hamburger" is also pretty easy:

.navbar-header{
    text-align:center;
}

.navbar-toggle {
    float: none;
}
Comments