CODEWITHSUNDEEP
csstwitter-bootstrap
denishaskin
denishaskin

Reputation: 3425

Bootstrap: center some navbar items

I would like to have a bootstrap navbar where some nav items are left-justified, some are right justified, and some are centered in the remaining space between them.

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a>Left</a></li>
        </ul>
        <ul class="nav nav-center">
            <li><a>Center 1</a></li>
            <li><a>Center 2</a></li>
        </ul>
        <ul class="nav pull-right">
            <li><a>Right</a></li>
        </ul>
    </div>
</div>

This jsfiddle http://jsfiddle.net/b7whs/ shows this--I'd like the Center 1 and Center 2 nav items to be together, centered in the navbar. Is this possible?

There are a lot suggestions here on SO about how to do this; none of them have worked for me. Is this even possible?

In my case, what's on the left and right will always be the same size, so I think it should be feasible.

Upvotes: 11

Views: 45899

Answers (4)

Govan
Govan

Reputation: 1379

add this code

<div class="col-lg-4 col-lg-offset-5 col-xs-2 col-xs-offset-4"> <ul class=" nav navbar-nav "> <li><a href="#">products</a></li> </ul> </div>

Upvotes: 0

Serlite
Serlite

Reputation: 12258

You just needed a couple of styles to get the behaviour that I think you wanted. It looks like you were going the display:inline-block route to center the elements, so I'll just continue along that approach. To your existing styles, add/modify definitions so that these styles are included:

.nav.nav-center {
    margin:0;
    float:none;
}

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

With that, the two options should move to the exact center of your navigation bar. Here's a JSFiddle example to show you what this would look like. I hope this is what you were looking for! If not, let me know and I'll be happy to help further.

Upvotes: 18

Mushi
Mushi

Reputation: 41

Just found out the solution myself today.

Just Add the CSS as:

/* center the navbar*/
.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

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

.center .dropdown-menu {
    text-align: left;
}

and add center class to navbar like this 

<div class="navbar navbar-inverse navbar-fixed-top center">
  <div class="navbar-inner">
    <div class="container center">
      ----
    </div>
  </div>
</div>

Upvotes: 2

Hushme
Hushme

Reputation: 3144

use this css actually in bootstrap li and ul are float left http://jsfiddle.net/b7whs/4/

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.nav.nav-center {
    display: inline-block;
    left: 0;
    right: 0;
    text-align:center;width:70%;
}
.nav.nav-center li,.nav.nav-center li  a{display:inline;float:none;line-height:40px;}

Upvotes: 0

Related Questions