Bootstrap centering navbar

Question

I'm new to bootstrap and am having a bit of trouble positioning a fluid dropdown menu. I would like to have it in the center or my page and have tried a few things, but it's not quite right.

I have tried to add a class of span6 and then add float: none; margin: 0 auto; to the css, and this does center it, but when the responsive menu kicks in it's somewhere between the middle instead of the left side. This also messes with the menu items.

I have also tried placing text-align:center; in various places to see if that would do anything, but it doesn't seem to effect anything.

Any help would be wonderful!

Here is my html

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12" >
      <div class="navbar ">
        <div class="container-fluid">
          <a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
          <div class="nav-collapse collapse navbar-responsive-collapse unique1">
            <ul class="nav">
              <li><?=anchor('/frontpage', 'Who we are');?></li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                  <li>  <a href="#">Action</a>
                  </li>
                  <li>  <a href="#">Another action</a>
                  </li>
                  <li>  <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li>  <a href="#">Separated link</a>
                  </li>
                  <li>  <a href="#">One more separated link</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                  <li>  <a href="#">Action</a>
                  </li>
                  <li>  <a href="#">Another action</a>
                  </li>
                  <li>  <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li>  <a href="#">Separated link</a>
                  </li>
                  <li>  <a href="#">One more separated link</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

http://getbootstrap.com/2.3.2/components.html#pagination you may want to go thru this page too. — Sangram Singh, Aug 04 '13 at 18:39
@SangramSingh I have gone through that, thank you, that is how I built this in the first place. And I'm not working with pagination, I'm dealing with a navbar — zazvorniki, Aug 04 '13 at 18:41
you are right. have you gone thru http://stackoverflow.com/questions/10128812/center-navbar-in-twitter-bootstrap-2-0 ? — Sangram Singh, Aug 04 '13 at 19:45
@SangramSingh I have been through that. I think I've been through every stackoverflow question already asked. :/ — zazvorniki, Aug 04 '13 at 20:09

score 0 · Answer 1 · answered Aug 04 '13 at 19:59

0

set margin-left:auto; margin-right:auto on ul with class nav

answered Aug 04 '13 at 19:59

ravisuhag

1,778
1
11
16

Unfortunately, this doesn't work...it just stays sitting on the left. – zazvorniki Aug 04 '13 at 20:08

score 0 · Answer 2 · answered Aug 06 '13 at 06:48

In Bootstrap.css line: 3102 edit

.nav > li > a {
 /* display: block; */
}

Edit the bootstrap.css file line: 3638 to 3651 as shown:

.navbar .nav {
  position: relative;
  left: 0;
  display: block;
/*  float: left;
*/  margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
  float: right;
  margin-right: 0;
}
.navbar .nav > li {
/*  float: left; */ 
}

For the following HTML works. It displays the menu center aligned.

<html>
<head>

  <link rel="stylesheet" href="public/css/LNedit.css"><link rel="stylesheet" href="public/css/bootstrap2.css">
  <style>
    .navbar-inner {
      text-align: center !important;
    }

    </style>


</head>

<body>

<div class="container-fluid">
    <div class="row-fluid">
    <div class="span12 navbar-inner" >
      <div class="navbar ">
        <div class="container-fluid">
          <a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
          <div class="nav-collapse collapse navbar-responsive-collapse unique1">
            <ul class="nav">
              <li><?=anchor('/frontpage', 'Who we are');?></li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                  <li>  <a href="#">Action</a>
                  </li>
                  <li>  <a href="#">Another action</a>
                  </li>
                  <li>  <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li>  <a href="#">Separated link</a>
                  </li>
                  <li>  <a href="#">One more separated link</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                  <li>  <a href="#">Action</a>
                  </li>
                  <li>  <a href="#">Another action</a>
                  </li>
                  <li>  <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li>  <a href="#">Separated link</a>
                  </li>
                  <li>  <a href="#">One more separated link</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"> </script><script type="text/javascript" src="js/markdown.js"> </script><!--script(type='text/javascript', src='js/main.js') --><!--script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')--><!--script(type='text/javascript', src='js/ui-bootstrap-tpls-0.4.0.min.js')--><script type="text/javascript" src="js/bootstrap-markdown.js"></script>
</body>
</html>

This is still not working. I added the exact code above, but all the navbar-inner does is add unwanted styles to my website. And the nav is still pushed to the left of the page, the text-align: center does not work. — zazvorniki, Aug 06 '13 at 18:09
its not to be added. its to be amended. I added /* */ to existing code. only the commenting needs to be done. — Sangram Singh, Aug 06 '13 at 18:45
Yes, I know that. I was just saying that I did what you said to do exactly. — zazvorniki, Aug 06 '13 at 18:52

Bootstrap centering navbar

2 Answers2