-3

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>
Community
  • 1
  • 1
rookie
  • 2,783
  • 5
  • 29
  • 43
  • Please provide relevant codes with your question – AndrewL64 Jun 19 '16 at 18:19
  • @AndrewLyndem The code is in the question I've linked to. Is there a reason for the downvotes? This question was a follow-up to another question on the site. Is there a more appropriate way of phrasing follow up questions? – rookie Jun 19 '16 at 19:33
  • Because those questions you are linking to can be deleted at any time thus making your question null and void to other people who needs help with this. Please read this [How-To-Ask-In-SO](http://stackoverflow.com/help/how-to-ask) – AndrewL64 Jun 19 '16 at 19:38

1 Answers1

3

Center "hamburger" is also pretty easy:

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

.navbar-toggle {
    float: none;
    margin-right:0;
}
mountbatt
  • 57
  • 1
  • 6