Adding a Logo to the Navbar

Originally, the only way to add a image logo to your themes navbar was to hardcode it in the nav.php file. However, as of version 0.8.0 of Bootstrap Genesis, the filter bsg_navbar_brand is added to simplify this process.

The filter can be used as follows. Simply place the following at the end of your 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;
}

---

Alternatively, we have the ability to take this filter even further by adding a theme customizer control with an image upload button (see below).

Now we can simply upload our logo to replace the site title text (see below).

To add this option to your theme follow the steps below.

Step One: Adding the Code

To add a custom logo through the customizer we first start by copying the following snippet and pasting it at the end of your functions.php file (or download it as a plugin here) This enables a new customizer image upload control that will let us to change the navbar logo with ease.

    // add customizer controls
    add_action( 'customize_register', 'bsg_navbar_brand_logo_customize_register' );
    function bsg_navbar_brand_logo_customize_register( $wp_customize ) {
        $wp_customize->add_setting( 'brand_logo',
             array(
                'default' => '',
                'type' => 'theme_mod',
                'capability' => 'edit_theme_options',
                'transport' => 'refresh',
             )
        );
        $wp_customize->add_control( new WP_Customize_Image_Control(
             $wp_customize,
             'bsg_brand_logo',
             array(
                'label' => __( 'Navbar Logo', 'bsg' ),
                'section' => 'title_tagline',
                'settings' => 'brand_logo',
                'priority' => 10,
             )
        ) );
    }
    
    // show logo if it has been added via customizer
    add_filter( 'bsg_navbar_brand', 'bsg_customizer_add_navbar_brand' );
    function bsg_customizer_add_navbar_brand( $output ) {
        $brand_logo = get_theme_mod( 'brand_logo' );
        // check $brand_logo is set
        if ( ! $brand_logo ) {
            return $output;
        }
        $output = '<a class="navbar-brand" id="logo" style="padding-top: 10px; padding-bottom: 10px;" 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="' .
            $brand_logo .
            '" alt="' .
            esc_attr( get_bloginfo( 'name' ) ) .
            '">';
        $output .= '</a>';
        return $output;
    }

---

Step Two: Adding your Logo

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

---

Step Three: Tweaking the Logo Appearance Size (optional)

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

Example making the image appear larger... Just make the .navbar-brand 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.