This is an updated version of the Bootstrap 3 navbar logos demo. There is a bug in firefox that incorrectly displays padding on images nested inside floating blocks. For more details and why it's important to use this method with the navbar logo read about check out this demo here.

If you want to see how to get your navbar to automatically collapse if the menu items overflow, check out this codepen.

If you want to create a sticky navbar check out this. Or for sticky with pure js only see this or alternatively this which shows how to do it with affix events.

Example 1 - Default Logo Resized to fit

Example 2 - Increase logo size and add menu to right side

Example 3 - Increase entire navbar height

Example 4 - Tall Narrow Logo

Example 5 - Pull menu to right

Example 6 - Background Image with hidden text

Example 7 - Center Navbar Brand / Logo On Mobile Display

Resize the browser width to view the effect!


Example 8 - Center Navbar logo background

Resize the browser width to view the effect!


Example 9 - Version 2 Centered (Using flexbox)

Resize the browser width to view the effect!