Changing navbar-brand

Created by: bryanwillis

The easiest way to fix this is by adding 100% height to the image. However, as I read in a closed issue, 100% height is not universally "desired"... But the way it works now, unless the image height is set to EXACTLY 20px it will be off center and additionally overflow beyond the navbar if it is too large unless further changes are made. And if it's smaller than 20 px it will be off center.

The demo on the docs is using an image that is the designed to be the same height and width, but many if not most sites want to use images of varying sizes and dimensions within the navbar.

Shouldn't the .navbar-brand be responsive by default, much like .img-responsive? This seems like it would be an obvious solution and we could even use max-height if not height.

.navbar-brand>img {
    max-height: 100%;   
        width: auto;
}

There are literally thousands of questions on stackoverflow on how to get navbar brand images to play nicely with the navbar. This would suggest that the current example in the docs needs to be at least expanded upon.

While the solution I put here is almost completely reliable there is a bug in firefox that I caught a couple months ago that could cause an issue with this on a very small occasion.

While this may be a reason not to to implement these changes it might be wise to note this somewhere since many people use the 100% height method already...

It looks like the FF community is working to fix this and it might already be the case in beta releases. An easy way to fix this is to just move the padding to the image itself.

I haven't looked into V4 much yet so I'm not totally sure if things have changed there.