Bootstrap 3 Navbar with Logo
Solution 1:
Why is everyone trying to do it the hard way? Sure, some of these approaches will work, but they're more complicated than is necessary.
OK, first - you need an image that will fit within your navbar. You can adjust your image via css height attribute (allowing width to scale) or you can just use an appropriately sized image. Whatever you decide to do - the way this looks will depend on how well you size your image.
For some reason, everyone wants to stick the image inside of an anchor with navbar-brand, and this isn't necessary. navbar-brand applies text styles that aren't necessary to an image, as well as the navbar-left class (just like pull-left, but for use in a navbar). All you really need is to add navbar-left.
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
You can even follow this with a navbar-brand item, which will appear to the right of the image.
Solution 2:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="/img/transparent-white-logo.png">
</a>
</div>
Solution 3:
COMPLETE DEMO WITH MANY EXAMPLES
IMPORTANT UPDATE: 12/21/15
There is currently a bug in Mozilla I discovered that breaks the navbar on certain browser widths with MANY DEMOS ON THIS PAGE. Basically the mozilla bug is including the left and right padding on the navbar brand link as part of the image width. However, this can be fixed easily and I've tested this out and I fairly sure it's the most stable working example on this page. It will resize automatically and works on all browsers.
Just add this to your css and use navbar-brand the same way you would .img-responsive. Your logo will automatically fit
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
Another option is to use a background image. Use an image of any size and then just set the desired width:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
ORIGINAL ANSWER BELOW (for reference only)
People seem to forget about object-fit a lot. Personally I think it's the easiest one to work with because the image automatically adjusts to the menu size. If you just use object fit on the image it will auto resize to the menus height.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
It was pointed out that this does not work in IE "yet". There is a polyfill, but that might be excessive if you don't plan on using it for anything else. It does look like object-fit is being planned for a future release of IE so once that happens this will work in all browsers.
However, if you notice the .img-responsive class in bootstrap the max-width is assuming you are putting these images in columns or something that has an explicit with set. This would mean that 100% specifically means 100% width of the parent element.
.img-responsive
max-width: 100%;
height: auto;
}
The reason we can't use that with the navbar is because the parent (.navbar-brand) has a fixed height of 50px, but the width is not set.
If we take that logic and reverse it to be responsive based on the height we can have a responsive image that scales to the .navbar-brand height and by adding and auto set width it will adjust to proportion.
max-height: 100%;
width: auto;
Usually we would have to add display:block; to the scenario, but since navbar-brand already has float:left; applied to it, it automatically acts as a block element.
You may run into the rare situation where your logo is too small. The img-responsive approach does not take this into account, but we will. By also adding the "height" attribute to the .navbar-brand > img you can be assured that it will scale up as well as down.
max-height: 100%;
height: 100%;
width: auto;
So to complete this I put them both together and it seems to work perfectly in all browsers.
<style type="text/css">
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* probably not needed anymore, but doesn't hurt */
-o-object-fit: contain;
object-fit: contain;
}
</style>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
DEMO http://codepen.io/bootstrapped/pen/KwYGwq
Solution 4:
Although your question is interesting i don't expect there will be one answer for it. Maybe your question is too broad. Your solution should depend on: other content in the navbar (number of items), sizes of your logo, should your logo act responsive, etc. Adding the logo in the a (with navbar-brand) seems a good starting point. I should use the navbar-brand class because this will add a padding (top / bottom) of 15 pixels.
I test this setting on http://getbootstrap.com/examples/navbar/ with a logo of 300x150 pixels.
Full screen > 1200:
between 768 and 992 pixels (menu not collapsed):
<768 (menu collapsed)
Beside the aesthetic aspects i did not find any technical problem. On small screens a big logo will overlap or break out the viewport maybe. Screens between 768 and 992 pixels also have other problems when the content doesn't fit in a line, see for example: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
The default navbar has The default navbar example adds a bottom-margin of 30px so the content of your navbar should never overlap the content of your page. (fixed navbars will have problems when the height of the navbar varies).
You will need some css and media queries to adapt the navbar to your need on different screen sizes. Please try to narrow your question. b.e. describe the problem you found on android.
update see http://bootply.com/77512 for an example.
On smaller screens such as a phone, the collapsed menu appears above the logo
interchange the button and the logo in your code, logo first (set float:left on the logo)
There is no way to align the menu items to anything except top
set the margin-top for .navbar-collapse ul. Use logo height minus navbar height, to align to the bottom or (logo height - navbar height) / 2 to center
Solution 5:
Instruction how to create a bootstrap navbar with a logo which is larger than the default height (50px):
Example with a logo 100px x 100px, standard CSS:
Compute the height and (padding top + padding bottom) of the logo. Here 120px (100px height + padding top (10px) + padding bottom (10px))
Goto bootstrap / customize. Set instead of navbar height 50px > 120px (50 + 70) and navbar-collapse-max-height from 340px to 410px (340 + 70). Download css.
-
In this example I use this navbar. In navbar-brand:
<div class="navbar-header"> ... </button> <a class="navbar-brand myLogo" href="#"> <img src="yourLogo.jpg" /> </a> </div>...add a class, for example myLogo, and an img (your logo)
<a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>. -
Add CSS
.myLogo { padding: 10px; }
Adequate to other sizes.
Example