torayeff
torayeff

Reputation: 9702

Twitter Bootstrap 3.0 Logo in the center of navbar

I want to center my logo in the navbar, can I use or should I use grid layouts inside navbar or I should do something else:

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        <div class="navbar-header">
                            <!-- I want this at the center of navbar -->
            <a class="navbar-brand" href="#"><img src="logo.png"/></a>
        </div>
</div>

Upvotes: 1

Views: 23503

Answers (3)

Jonathan Batista
Jonathan Batista

Reputation: 111

The method shown by bwillis works nicelly, but I had to add some margin to my navbar-collapse. Then for me it was:

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

.navbar-collapse {
        margin-top: 50px;
}

I also needed my navbar-nav centered,then I add:

.navbar-nav {
    width: 100%;
    text-align: center;
}
.navbar-nav > li {
    float: none;
    display: inline-block;
}

Upvotes: -1

Bryan Willis
Bryan Willis

Reputation: 3642

Unfortunately the accepted answer is using html for Bootstrap 2. However, I've come up with several ways to do this using Bootstrap 3. The simplest way to do this is probably using css translate.

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

Live Demo: http://codepen.io/candid/pen/dGPZvR

This method also allows us to use background images for the logo and allows us to include text without having it show up in the display.

HTML:

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text</a>

CSS:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

Live Demo: http://codepen.io/candid/pen/NxWoJL

If for some reason you only want to do this on mobile display simply wrap .navbar-brand in a media query...

/* CENTER ON MOBILE ONLY */
@media (max-width: 768px) {
.navbar-brand {
        transform: translateX(-50%);
        left: 50%;
        position: absolute;
    }
}

Upvotes: 8

Joseph
Joseph

Reputation: 13178

This has been asked before a few times, like here.

I've set up a jsfiddle similar to your HTML provided, using your Gravatar since your logo wasn't available: http://jsfiddle.net/q68VS/

Important CSS:

.nav-center {
    margin:0;
    float:none;
}

.navbar-inner{
    text-align:center;
}

Upvotes: 3

Related Questions