Divi custom header design

To achieve a custom header design in Divi, you can use the Divi Builder and some custom CSS. The Divi Builder allows you to create custom layouts for your header, and the custom CSS will help you style it according to your design preferences.

Here’s an example code snippet that demonstrates how to create a custom header design using the Divi Builder and custom CSS:

function wpsnippets_custom_header_design() {
    if ( ! is_admin() ) {
        // Enqueue the custom CSS file
        wp_enqueue_style( 'custom-header-design', get_stylesheet_directory_uri() . '/custom-header-design.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_custom_header_design' );

In this code snippet, we’re creating a custom function wpsnippets_custom_header_design that will be hooked into the wp_enqueue_scripts action. This function checks if we’re not in the admin area and then enqueues a custom CSS file called custom-header-design.css using the wp_enqueue_style function.

You’ll need to create a custom-header-design.css file in your theme directory and add your custom CSS styles for the header design in that file.

This code snippet allows you to separate your custom CSS for the header design from the main stylesheet, making it easier to manage and update.

Remember to replace custom-header-design.css with the actual file name and path of your custom CSS file.

By using this code snippet, you can easily create a custom header design in Divi by adding your desired CSS styles in the custom-header-design.css file.

Examples

Example 1: Creating a Custom Header Design with Divi Theme Builder

This use case demonstrates how to create a custom header design using the Divi Theme Builder. The code example shows how to add a custom logo and navigation menu to the header.

function wpsnippets_custom_header_design() {
    if ( function_exists( 'et_theme_builder' ) ) {
        et_theme_builder()->register_header_layout( 'custom-header', 'Custom Header' );
    }
}
add_action( 'wp', 'wpsnippets_custom_header_design' );

Explanation: This code registers a custom header layout called “Custom Header” using the Divi Theme Builder’s register_header_layout() function. It checks if the Divi Theme Builder plugin is active before registering the layout. You can modify the layout by adding additional elements or customizing the existing ones.

Example 2: Adding a Custom Logo to the Divi Custom Header

This use case demonstrates how to add a custom logo to the Divi custom header design. The code example shows how to replace the default logo with a custom logo.

function wpsnippets_custom_header_logo( $logo ) {
    $custom_logo = '<img src="' . get_stylesheet_directory_uri() . '/images/custom-logo.png" alt="Custom Logo">';
    return $custom_logo;
}
add_filter( 'et_theme_builder_logo', 'wpsnippets_custom_header_logo' );

Explanation: This code uses the et_theme_builder_logo filter to replace the default logo with a custom logo. The wpsnippets_custom_header_logo function returns the HTML markup for the custom logo, which is an image tag pointing to the custom logo file. You can modify the logo markup to fit your design requirements.

Example 3: Customizing the Navigation Menu in the Divi Custom Header

This use case demonstrates how to customize the navigation menu in the Divi custom header design. The code example shows how to add a custom CSS class to the navigation menu.

function wpsnippets_custom_header_menu_class( $menu_class ) {
    $menu_class[] = 'custom-menu';
    return $menu_class;
}
add_filter( 'et_theme_builder_menu_class', 'wpsnippets_custom_header_menu_class' );

Explanation: This code uses the et_theme_builder_menu_class filter to add a custom CSS class to the navigation menu. The wpsnippets_custom_header_menu_class function appends the “custom-menu” class to the existing menu classes and returns the modified array. You can add additional classes or modify the existing ones to style the navigation menu according to your design preferences.