Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Centering links (within li's) in Bootstrap navbar

Centering links (within li's) in Bootstrap navbar

Problem

I've implemented the Solution here which almost solves my problem, however, I need the

to be centered between the entire navbar and not just the elements adjacent to it ( and in my case).

Important: I customized my navbar to be 96px instead of the default 40px, and I want the

to appear centered and "underneath" the other elements as it will have its own background-color etc.

Here is my code so far:


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.)

Problem courtesy of: user982119

Solution

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/

Solution courtesy of: Robert McKee

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Centering links (within li's) in Bootstrap navbar

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×