Centering links (within li's) in Bootstrap navbar

Question

I've implemented the solution here which almost solves my problem, however, I need the <ul class="nav"> to be centered between the entire navbar and not just the elements adjacent to it (<a class="brand"> and <p class="navbar-text pull-right"> in my case).

Important: I customized my navbar to be 96px instead of the default 40px, and I want the <ul class="nav"> to appear centered and "underneath" the other elements as it will have its own background-color etc.

Here is my code so far:

<div class="navbar navbar-inverse navbar-fixed-top center">
    <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" href="/home"><img src="http://jayeshcp.files.wordpress.com/2013/03/twitter-bootstrap.jpg" style="width:400px;height:60px;" /></a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                </ul>
                <p class="navbar-text pull-right">
                    <input class="span2" type="text" placeholder="Email">
                    <input class="span2" type="password" placeholder="Password">
                </p>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

Note the extra center class that I added - that is from the solution that I linked to. It looks like this:

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

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

How do I center the ul and give it padding above without breaking everything else in Bootstrap? Would offer more than bounty if there was another currency!

edit: jsfiddle is here (I pasted the whole minified css file (with the customized navbar height) instead of referencing it, sorry. Underneath it are the other customizations.)

Ok I'll try. Might take me a moment to make it accurate. Will edit my post soon with it unless I get an answer before I'm done. — notAnonymousAnymore, Jul 03 '13 at 16:46
Yeah except with bigger navbar and a silly logo. I updated my post with a jsfiddle link. The whole idea is for the links to sit _underneath_ the other stuff, and always centered. — notAnonymousAnymore, Jul 03 '13 at 17:16

Robert McKee · Accepted Answer · 2013-07-03T18:10:32.950

0

p.navbar-text
{
    float: none;
    position: relative;
    text-align: right;
}
.navbar .nav
{
    display:block !important;
    float: right !important;
    width: 100%;
}

jsfiddle: http://jsfiddle.net/C7LWm/103/

Here's the solution for placing it underneath instead of below:

.navbar .nav
{
   position: absolute;
   left:0;
   right:0;
   width: 100%;
   background-color:yellow;
}
p.navbar-text
{
   width: 440px;
   text-align:right;
   position:relative;
   z-index:2
}
.navbar .brand 
{ 
   position: relative; 
   z-index:2; 
   padding: 0; 
   width: 30%;
   height: 60px;
   background-image: url('http://placehold.it/400x60&text=Your Logo Here');
   background-repeat: no-repeat; background-size: contain;
   margin: 18px 0;
   background-position: center left
}
.navbar .brand img
{
   display:none;
}

Jsfiddle: http://jsfiddle.net/C7LWm/109/

edited Jul 03 '13 at 18:10

answered Jul 03 '13 at 17:26

Robert McKee

21,305
1
43
57

This doesn't work because it increases the height of the navbar. The
– notAnonymousAnymore Jul 03 '13 at 17:41
This would be underneath: http://jsfiddle.net/C7LWm/105/ and I applied a yellow background to the ul so you can see it's size/width. – Robert McKee Jul 03 '13 at 17:44
That looks like the solution :) I just added some 'padding-top' to '.navbar .nav'. I'm gonna carry on testing it. Should I used padding or margin? They both seem to do the same thing in this context. – notAnonymousAnymore Jul 03 '13 at 18:02
They should be similar in effect. Here's one that I changed out the logo from placeholder.it, move it to a style and hide the img, and cause to it to scale some to make a bit more room for smaller screens: http://jsfiddle.net/C7LWm/109/ – Robert McKee Jul 03 '13 at 18:06
That's even better! Is there any way to make the '.jcenter.navbar .nav, .jcenter.navbar .nav > li' float left instead of none (ie. float the nav links left) for when responsive kicks in for smaller screens? If that's overkill and will cause other issues I can live with it staying in the center. – notAnonymousAnymore Jul 03 '13 at 18:10
'margin-top' is what I used because I needed to give the ul a background-color – notAnonymousAnymore Jul 03 '13 at 18:28

Centering links (within li's) in Bootstrap navbar

1 Answers1