Book Image

Bootstrap Site Blueprints

Book Image

Bootstrap Site Blueprints

Overview of this book

Table of Contents (16 chapters)
Bootstrap Site Blueprints
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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 the width attribute. Otherwise, it will appear much too large.

  5. Save your results.

  6. If you refresh your page, you should see the logo image appear as shown in the following screenshot:

Now for the footer.

Our social icons should...