Twitter Bootstrap 3.0 Logo in the center of navbar

Question

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>

possible duplicate of [Bootstrap: center some navbar items](http://stackoverflow.com/questions/17824914/bootstrap-center-some-navbar-items) — Joseph, Oct 10 '13 at 00:05

Bryan Willis · Answer 1 · 2015-12-08T07:20:39.250

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

For flexbox approach see this example: http://stackoverflow.com/a/34150526/3123861 — Bryan Willis, Dec 08 '15 at 08:07

score 3 · Accepted Answer · edited May 23 '17 at 12:22

3

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

edited May 23 '17 at 12:22

Community

1
1

answered Oct 10 '13 at 00:01

Joseph

12,678
19
76
115

score -1 · Answer 3 · answered Jun 30 '16 at 21:40

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

Twitter Bootstrap 3.0 Logo in the center of navbar

3 Answers3

Linked