css - Modify twitter bootstrap navbar

Question

Ive been trying to modify the twitter bootstrap navbar, at the moment all the links are aligned to the left, when what i would really like is the have them central.

In a different post i read that you use this

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

But this did not work for me

What do i need to change in the css to make this happen, i understand i put the modified css in the bootstrap and overrides.

Any help appreciated

this is my markup

layouts/application

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

I've also tried this

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

Answer 1

You can center your nav menu by setting your menu items to display:inline-block instead of float:left like so:

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

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

Though i suggest you create your own class to target your navbar menu that you wish to center, this way you won't bother the bootstrap default values and mess with other nav sections you may have in your page. You can do it like so:

^{Notice the .center class in the navbar container}

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

And then you can target the .center class like so:

.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;
}

Demo: http://jsfiddle.net/C7LWm/show/

Edit: Forgot to realign the submenu items to the left, this is the fix:

CSS

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

Demo: http://jsfiddle.net/C7LWm/1/show/