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) {
}