Bootstrap Site Blueprints

Adding logo images to the navbar and footer

Let's start by placing the markup for our logo image within the navbar-brand link. We'll find the markup for this in the header-top-navbar.php file in the templates folder:

1. Open the header-top-navbar.php file inside the templates folder in your editor.
2. Find the following element:

   <a class="navbar-brand" ...

3. Delete the following tag, which places our site name within the navbar brand link:

   <?php bloginfo('name'); ?>

4. Replace the previous line of code with the appropriate tag for our logo image:

   <img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.png" width="120" alt="Bootstrappin'">

   Tip

   Remember that the logo image is built large so that it appears crisp in a retina display. So, be sure to include ...