Divi header logo size

The code snippet below can be used to adjust the size of the logo in the Divi theme header. This can be useful when you want to customize the appearance of your website’s logo to better fit your design.

function wpsnippets_adjust_divi_logo_size() {
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}
add_action( 'after_setup_theme', 'wpsnippets_adjust_divi_logo_size' );

This code snippet uses the add_theme_support() function to add support for a custom logo in the Divi theme. The custom-logo feature allows you to define the height and width of the logo. In the example above, the height is set to 100 pixels and the width is set to 400 pixels. The flex-height and flex-width parameters are set to true to allow the logo to be flexible in size.

To use this code snippet, you can add it to your theme’s functions.php file or create a custom plugin. After adding the code, the logo size in the Divi header will be adjusted according to the specified dimensions. You can modify the height and width values to fit your specific requirements.

Examples

Example 1: Adjusting the Divi header logo size using CSS

This use case demonstrates how to adjust the size of the Divi header logo by adding custom CSS code to your WordPress theme.

/* Custom CSS to adjust the Divi header logo size */
#logo {
    max-height: 100px;
}

In this example, we use the #logo selector to target the Divi header logo element. By setting the max-height property to a specific value (e.g., 100px), we can adjust the size of the logo. You can modify the max-height value to your desired size.

Example 2: Adjusting the Divi header logo size using a filter

This use case demonstrates how to adjust the size of the Divi header logo by using a filter hook in your WordPress theme’s functions.php file.

/**
 * Adjust the Divi header logo size using a filter.
 */
function wpsnippets_adjust_divi_logo_size( $logo_height ) {
    return 100;
}
add_filter( 'et_pb_theme_builder_header_logo_max_height', 'wpsnippets_adjust_divi_logo_size' );

In this example, we use the et_pb_theme_builder_header_logo_max_height filter hook to modify the maximum height of the Divi header logo. By returning a specific value (e.g., 100), we can adjust the logo size. You can modify the returned value to your desired size.

Example 3: Adjusting the Divi header logo size using a child theme

This use case demonstrates how to adjust the size of the Divi header logo by overriding the relevant CSS styles in a child theme.

/* Custom CSS in a child theme to adjust the Divi header logo size */
#logo {
    max-height: 100px !important;
}

In this example, we create a child theme and add custom CSS code to the child theme’s stylesheet. By targeting the #logo selector and using the max-height property with the !important declaration, we can override the default logo size and set it to a specific value (e.g., 100px). You can modify the max-height value to your desired size.