Centering menu items with boostrap navbar

Question

I have a simple sticky navbar that I am trying to put menu items on the left, center and right side. I found the bootstrap documentation with the navbar-right and navbar-left. Both of those work great, however if I want something to be in the middle I can't find a term/variable in the bootstrap library that does that. I have also tried adding align="center" to the li and a tags. Is there something specific I can call to center menu items in a bootstrap nav, or do I have to edit in manually with css align?

    <!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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" href="#"> pushed left by default? </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar" align="center">
        <li class="active"><a href="#">pushed left by default?</a></li>
        <li><a href="#">center this part  </a></li>
        <li><a href="#">and this too  </a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">right </a></li>
        <li><a href="#"> right</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

score 3 · Accepted Answer · edited May 23 '17 at 11:53

3

I posted this link as a duplicate - Center content in responsive bootstrap navbar, but realized the answer does not work correctly with navbar-right.

Try creating/adding a navbar-center class on the navbar-nav that you want centered.

<ul class="nav navbar-nav navbar-center" align="center">
    <li class="active"><a href="#">pushed left by default?</a></li>
    <li><a href="#">center this part  </a></li>
    <li><a href="#">and this too  </a></li>
</ul>

Then add the following CSS:

.navbar-center {
    display: inline-block;
    float: none;
}

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

JSFiddle Here

edited May 23 '17 at 11:53

Community

1
1

answered Mar 03 '16 at 21:00

Tricky12

6,752
1
27
35

yes that is exactly what I am looking for, surprised there isn't much documentation on this, thanks again! – Ben Casalino Mar 03 '16 at 21:05
@BenjaminCasalino I agree. It is silly on behalf of Bootstrap's creators that there is a `navbar-left` and a `navbar-right`, yet no `navbar-center`. And no problem at all! – Tricky12 Mar 03 '16 at 21:07

Centering menu items with boostrap navbar

1 Answers1