Bootstrap navbar will not center no matter what

Question

I have been having a dreadful time trying to center my navbar li in the center of my navbar using Bootstrap. I have tried using info from similar questions such as this one, this one, and this one. My navigation doesn't use pills or tabs, but I was hoping I could edit my code accordingly. My site uses a sticky nav, which is probably the most complicated thing on my page. I've create a JSFiddle using the same code I've uploaded, but for some reason the JSFiddle code properly aligns everything, whereas on my page, all the links are offset to the right 10 or so pixels. I've tried setting all my margins and padding to 0 as well, still no luck.

Can somebody please help me, this is annoying the crap out of me and I'm about to throw my computer off the roof! If you can solve my problem I'll bake you some cookies.

Thanks,

Brian

P.S. Sorry for all the links :-/

Here's my JSFiddle

Here's my HTML:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top center" data-spy="affix">
  <div class="navbar-inner pull-center" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <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>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

Here's my mess of a CSS:

.navbar {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding:0;
    z-index:999;
    margin-bottom:0;
}
.navbar.navbar-inverse .navbar-inner {
    background: #390 url(../img/green-bg.png) repeat;
    border:none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-bottom:0;
}
.navbar .nav, .navbar .nav > li {
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    padding:0 10px;
    margin:0 auto;
}
.navbar .nav > li a {
    color:white;
    background:rgba(0, 0, 0, 0.2);
    text-shadow:none;
    font-size:1.5em;
    font-family: marvel, serif;
    padding:.5em 1em;
    margin:.5em 1em;
    min-width:90px;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
    color:#FFF;
    background: #390 url(../img/green-bg.png) repeat;
    text-shadow:none;
    font-size:1.5em;
    font-family: marvel, serif;
    padding:.5em 1em;
    margin:.5em 1em;
    -webkit-box-shadow: inset 0 0 10px #000;
    -moz-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000;
}
.navbar .nav > li {
    padding:1em;
    margin:0;
    width:10em;
}
#nav.affix, #nav.affix-bottom {
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0px 2px 4px #000;
    -moz-box-shadow: 0px 2px 4px #000;
    box-shadow: 0px 2px 4px #000;
}
#nav {
    position:relative;
    z-index:999;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
.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;
}

Can you plz post the page where you are having the issue , so that we can see the exact problem you are facing. — Shail, Feb 15 '13 at 06:02

score 1 · Answer 1 · answered Feb 15 '13 at 05:03

1

Try changing

.navbar .nav, .navbar .nav > li {
    float:center;
    ...

to

.navbar .nav, .navbar .nav > li {
    text-align:center;
    ...

As far as I know there is no such thing as float center. Only left, right, none, and inherit.

answered Feb 15 '13 at 05:03

user1934286

1,732
3
23
42

@Brian Increasing padding right on .navbar-inner seems to push the content left wards, however, this does not seem like a fix, but a work around. In file siteroot/css/bootstrap.min.css – user1934286 Feb 15 '13 at 05:24
@fredsbend I've been working on CSS for the past 5 years. The valid values are `left | right | none | inherit`. Let me know if it is a mistake! ;) – Praveen Kumar Purushothaman Feb 15 '13 at 05:33
The `float:center` was code I took for somebody else who had the same question – Brian Feb 15 '13 at 05:54

score 1 · Accepted Answer · answered Feb 15 '13 at 05:17

1

.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a and .navbar .nav > li a both have a rule of margin: 0.5em 1em;. Change it to margin: 0.5em 0;.

.navbar .nav, .navbar .nav > li has a rule of float: center;. Remove it.

Add this rule:

.navbar .nav {
    float: none;
}

answered Feb 15 '13 at 05:17

Adam Taylor

4,691
1
37
38

can you plz paste the line number on which you got the float:center property . There is no such property as Far as My exp goes. – Shail Feb 15 '13 at 05:48
Worked like a charm, I guess I was doubled up on margins in certain areas. Thank you, good sir! – Brian Feb 15 '13 at 06:01
float:center; I coudlnt find it . – Shail Feb 15 '13 at 06:06
@Shail that's because I deleted it when I uploaded my new code. – Brian Feb 15 '13 at 06:20

zzat · Answer 3 · 2013-02-15T05:19:49.937

0

Try adding this class to ul after nav

.nav-center {
    float: none;
}

this will override the float: left which comes from bootstrap.css.

edited Feb 15 '13 at 05:19

answered Feb 15 '13 at 05:13

zzat

63
4

Bootstrap navbar will not center no matter what

3 Answers3

Linked