Center Bootstrap Navbar -- do not understand why navigation won't center
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:
@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: http://jsbin.com/iJaJAzIM/6/
http://jsbin.com/iJaJAzIM/6/edit
Related videos on Youtube
Michael Falciglia
Updated on September 14, 2022Comments
-
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
andmargin-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 almost 10 yearsGood approach. Appreciate it.
-
Christina almost 10 years@Ravimallya: I have another one here, it's for another configuration: jsbin.com/iJaJAzIM/6/edit
-
Christina almost 10 yearsOn 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.