WordPress Divi header transparent

Make Divi header transparent with code.

To make the Divi header transparent, you can use custom CSS code. This can be useful if you want to create a modern and sleek design for your website. Here’s an example of how you can achieve this:

/* Make the Divi header transparent */
#main-header {
    background-color: transparent;
}

You can add this CSS code to your WordPress theme by following these steps:

Go to your WordPress dashboard.
Navigate to “Appearance” and click on “Customize”.
In the Customizer, click on “Additional CSS” (or a similar option depending on your theme).
Paste the CSS code snippet provided above into the text area.
Click on “Publish” to save your changes.

This code snippet targets the #main-header element, which is the container for the Divi header. By setting the background-color property to transparent, the header will appear as if it has no background color, allowing the content behind it to show through.

Remember to adjust the CSS selector (#main-header) if your theme uses a different ID or class for the header element.

Examples

Example 1: Making the Divi header transparent on the homepage

This use case demonstrates how to make the header of a Divi theme website transparent on the homepage. By adding a custom CSS class to the header module and using some CSS code, we can achieve the desired effect.

function wpsnippets_add_transparent_header_class( $classes ) {
    if ( is_front_page() ) {
        $classes[] = 'transparent-header';
    }
    return $classes;
}
add_filter( 'body_class', 'wpsnippets_add_transparent_header_class' );

Explanation: This code snippet adds a custom CSS class called “transparent-header” to the body element when the homepage is being displayed. This class can then be used to target the header module and apply CSS styles to make it transparent.

Example 2: Applying custom CSS to make the Divi header transparent

In this use case, we will apply custom CSS styles to make the Divi header transparent on all pages of the website.

function wpsnippets_make_divi_header_transparent() {
    echo '<style>
        .et_header_style_centered .et-fixed-header {
            background-color: transparent !important;
        }
    </style>';
}
add_action( 'wp_head', 'wpsnippets_make_divi_header_transparent' );

Explanation: This code adds a custom CSS block to the <head> section of the website. It targets the Divi header element with the class .et-fixed-header and sets its background color to transparent using the !important declaration to override any existing styles.

Example 3: Making the Divi header transparent on specific pages

This use case demonstrates how to make the Divi header transparent on specific pages of the website, excluding others.

function wpsnippets_make_header_transparent_on_pages() {
    if ( is_page( array( 'about', 'contact' ) ) ) {
        echo '<style>
            .et_header_style_centered .et-fixed-header {
                background-color: transparent !important;
            }
        </style>';
    }
}
add_action( 'wp_head', 'wpsnippets_make_header_transparent_on_pages' );

Explanation: This code checks if the current page is either the “about” or “contact” page using the is_page() function with an array of page slugs. If the condition is met, it adds a custom CSS block to the <head> section, making the Divi header transparent on those specific pages.