Centering brand logo in Bootstrap Navbar

Question

I am trying to implement a Bootstrap 3 navbar so that the brand logo to always remain in the middle. This is the code:

<div class="navbar navbar-fixed-top navbar-default">    <div class="navbar-inner">      <div class="container">        <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        </button>        <a class="brand" style="margin: 0; float: none;" href="#">        <img src="/Content/themes/next/images/logo.png" /></a>        <div class="nav-collapse">          <ul class="nav">            <li> <a href="#">Item 1</a></li>            <li> <a href="#">Item 1</a></li>            <li> <a href="#">Item 1</a></li>          </ul>        </div>        <ul class="nav pull-right">          <li>            <a href="#">              <div class="nextCog"></div>            </a>          </li>        </ul>        <span class="navbar-text pull-right">superpup1 </span>      </div>    </div>  </div>

It makes a nice looking navbar:

However, I would like the logo (green) remain in the middle persistently. I am adding this style to the tag with "brand" class:

<a class="brand" style="margin: 0; float: none; text-align:center" href="#">   <img src="/Content/themes/next/images/logo.png" /> </a> 

It partially solves the problem: the logo is in the middle but it pushes the rest of the navbar elements down:

This is an undesirable effect that I would like to eliminate. Could you suggest a solution? Maybe it's a wrong approach to centering a logo from the start ?

Answer 1

Try this:

.navbar {     position: relative; } .brand {     position: absolute;     left: 50%;     margin-left: -50px !important;  /* 50% of your logo width */     display: block; } 

Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.

See fiddle

Answer 2

The simplest way is css transform:

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

DEMO: http://codepen.io/candid/pen/dGPZvR

---

This way also works with dynamically sized background images for the logo and allows us to utilize the text-hide class:

CSS:

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

HTML:

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

---

We can also use flexbox though. However, using this method we'd have to move navbar-brand outside of navbar-header. This way is great though because we can now have image and text side by side:

.brand-centered {   display: flex;   justify-content: center;   position: absolute;   width: 100%;   left: 0;   top: 0; } .navbar-brand {   display: flex;   align-items: center; } 

Demo: http://codepen.io/candid/pen/yeLZax

To only achieve these results on mobile simply wrap the above css inside a media query:

@media (max-width: 768px) {  }