Center Bootstrap Navbar -- do not understand why navigation won't center

11,228

There's only two directions of the navigation in Bootstrap, left or right. To center the navbar, there's a couple of methods. This is what I do for one of them. Following this are two example links: enter image description here

@media (min-width:768px) { 
/* centered navigation */
 .nav.navbar-nav {
     float: left;
 }
 .nav.navbar-nav {
     clear: left;
     float: left;
     margin: 0;
     padding: 0;
     position: relative;
     left: 50%;
     text-align: center;
 }
 .nav.navbar-nav > li {
     position: relative;
     right: 50%;
 }
 .nav.navbar-nav li {
    text-align: left
 }
}

This is a modified version of the above. I have no idea what you're doing with the logo.

DEMO 1: http://jsbin.com/iJaJAzIM/3/

http://jsbin.com/iJaJAzIM/3/edit?html,css,js,output


This is another approach:

@media (min-width:768px) { 
 .navbar > .container {
    text-align: center;
 }
 .navbar-header {
    float: none;
    display: inline-block;
 }
 .navbar-brand {
    float: none;
    display: inline-block;
 }
 .navbar .navbar-nav {
    float: none;
    display: inline-block;
    clear: none;
 }
 .navbar .navbar-nav > li {
    float: none;
    display: inline-block;
 }
 .navbar .navbar-nav > li li {
    text-align: left
 }
 /*add id of centerednav on the collapse or it won't work*/
 .collapse.navbar-collapse#centerednav {
    float: none;
    display: inline-block!important;
    width: auto;
    clear: none;
 }
}

DEMO 2:enter image description here http://jsbin.com/iJaJAzIM/6/

http://jsbin.com/iJaJAzIM/6/edit

Share:
11,228

Related videos on Youtube

Michael Falciglia
Author by

Michael Falciglia

Updated on September 14, 2022

Comments

  • Michael Falciglia
    Michael Falciglia about 1 year

    I just started to learn bootstrap today and I was working with their example on this page http://getbootstrap.com/examples/offcanvas/

    As you can see if you go to that page, the navigation is aligned to the left. I have attempted to use what I do in normal CSS, which is:

    margin-right:auto and margin-left:auto

    I also tried

    text-align:center

    Neither of these have worked and I have read their navigation documentation and I don't understand what I am suppose to do differently here.

    Below is code from that navigation page. I have attempted to put the tags in all 4 navigation containers at once and individually:

    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
          <div class="container">
            <div class="navbar-header" >
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <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="#">Project name</a>
            </div>
            <div class="navbar-collapse collapse" style="height: 1px;margin: auto;text-align: center;">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div><!-- /.nav-collapse -->
          </div><!-- /.container -->
        </div>
    
  • Ravimallya
    Ravimallya almost 10 years
    Good approach. Appreciate it.
  • Christina
    Christina almost 10 years
    @Ravimallya: I have another one here, it's for another configuration: jsbin.com/iJaJAzIM/6/edit
  • Christina
    Christina almost 10 years
    On the first it was done before for other work and the second took only a few min since I am familiar with the LESS files.