Custom Navbar Logo

Navbar Brand filter

The filter can be used as follows. Simply place the following at the end of your theme functions.php file and modify the $output variable with your own image / html.

add_filter( 'bsg_navbar_brand', 'mytheme_bsg_navbar_brand' );
function mytheme_bsg_navbar_brand( $output ) {
    $output = '<a  class="navbar-brand" id="logo" style="padding-top: 5px; padding-bottom: 5px;" title="' .
        esc_attr( get_bloginfo( 'description' ) ) .
        '" href="' .
        esc_url( home_url( '/' ) ) .
        '">';
        $output .= '<img style="height: 100%; max-height: 100%; width: auto; margin: 0 auto;" src="http://example.com/logo.png" alt="Bootstrap Genesis">';
    $output .= '</a>';

    return $output;
}

---

Default usage with customizer

To access your newly created settings visit the admin customizer, specifically at the following url (replacing example.com with your site):

http://example.com/wp-admin/customize.php?autofocus%5Bsection%5D=title_tagline

Simply upload your logo to replace the site title text (see below).

Optional: Tweaking the Logo Appearance Size

If your logo appears to small or large in the menu simply adjust the top and bottom inline padding styles of .navbar-brand > img .

Example making the image appear larger... Just make the .navbar-brand > img inline padding less.

style="padding-top: 2px; padding-bottom: 2px;"

---

Step Four: Making a taller navbar (optional)

You shouldn't need to adjust the image inline styles as it automatically adjusts based on the navbar-brand height which is by default 50px. However, there may come a case where you want to make the navbar itself taller. To do this you'll need to first increase the height of .navbar-brand.

.nav-primary .navbar-brand {
    height: 80px;
}

Now that we changed our .navbar-brand height to 80px, we need to match that height with our .nav links. Since the links have a line height of 20px, we'll add 30px top and bottom to equal the new .navbar-brand height.

/* padding + line-height = 80px or height of .navbar-brand */
.nav-primary .nav >li >a {
    padding-top: 30px;
    padding-bottom: 30px;
    line-height: 20px; /* default setting */
}

To get a better understanding of how to style the logo and navbar as well as some live logo demo options, see here.