Customizing Bootstrap 3 Navbar with a Logo

Bootstrap 3 provides a default navbar component that can be easily customized to include a logo. In this tutorial, we will explore how to add an image logo to the Bootstrap 3 navbar and make it responsive for different screen sizes.

Adding a Logo to the Navbar

To add a logo to the navbar, you can simply place an <img> tag inside the .navbar-brand element. However, to ensure that the logo is displayed correctly on different screen sizes, we need to add some CSS styles.

<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" href="#" title="Logo">
    <img src="/path/to/logo.png" alt="Logo">
  </a>
</div>

Making the Logo Responsive

To make the logo responsive, we can add the following CSS styles:

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

These styles will ensure that the logo is scaled to fit the navbar’s height while maintaining its aspect ratio.

Fixing Firefox Bug

There is a known bug in Firefox that causes the navbar brand link to include the left and right padding as part of the image width. To fix this, we can add the following CSS styles:

.navbar-brand {
  padding: 0px;
}
.navbar-brand > img {
  height: 100%;
  padding: 15px;
  width: auto;
}

Using a Background Image

Alternatively, you can use a background image for the logo instead of an <img> tag. To do this, add the following CSS styles:

.navbar-brand {
  background: url(/path/to/logo.png) center / contain no-repeat;
  width: 200px; /* adjust the width to fit your logo */
}

Example Use Case

Here is an example of a complete navbar with a logo:

<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="#" title="Logo">
        <img src="/path/to/logo.png" alt="Logo">
      </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>

By following these steps, you can easily add a logo to your Bootstrap 3 navbar and make it responsive for different screen sizes.