Divi header navigation

The Divi theme is a popular WordPress theme that comes with a built-in header navigation menu. However, sometimes you may want to customize the header navigation to add additional functionality or change its appearance. In this case, you can use the following code snippet to modify the Divi header navigation.

function wpsnippets_custom_divi_header_navigation() {
    // Add your custom code here to modify the Divi header navigation
}
add_action( 'wp_head', 'wpsnippets_custom_divi_header_navigation' );

This code snippet creates a custom function called wpsnippets_custom_divi_header_navigation that will be executed when the wp_head action hook is triggered. Inside this function, you can add your custom code to modify the Divi header navigation.

For example, if you want to add a new menu item to the header navigation, you can use the following code:

function wpsnippets_custom_divi_header_navigation() {
    // Add a new menu item
    echo '<li><a href="#">New Menu Item</a></li>';
}
add_action( 'wp_head', 'wpsnippets_custom_divi_header_navigation' );

This code snippet adds a new <li> element with a link to the header navigation. You can customize the link URL and label as needed.

Remember to replace wpsnippets_custom_divi_header_navigation with your own unique function name to avoid conflicts with other functions.

Examples

Example 1: Adding a custom logo to the Divi header navigation

This use case demonstrates how to add a custom logo to the Divi header navigation. The code example below uses the wpsnippets_add_custom_logo() function to add a custom logo to the header navigation.

function wpsnippets_add_custom_logo() {
    if ( function_exists( 'the_custom_logo' ) ) {
        the_custom_logo();
    }
}

Explanation: The wpsnippets_add_custom_logo() function checks if the the_custom_logo() function exists and then calls it to display the custom logo in the header navigation.

Example 2: Changing the background color of the Divi header navigation

This use case demonstrates how to change the background color of the Divi header navigation. The code example below uses the wpsnippets_change_header_background_color() function to modify the background color.

function wpsnippets_change_header_background_color() {
    echo '<style type="text/css">
        .et_header_style_centered .et-fixed-header {
            background-color: #ff0000;
        }
    </style>';
}

Explanation: The wpsnippets_change_header_background_color() function adds inline CSS to change the background color of the header navigation. The CSS selector .et_header_style_centered .et-fixed-header targets the header navigation element and sets the background color to red (#ff0000).

Example 3: Adding a search icon to the Divi header navigation

This use case demonstrates how to add a search icon to the Divi header navigation. The code example below uses the wpsnippets_add_search_icon() function to add a search icon.

function wpsnippets_add_search_icon() {
    echo '<div class="et_search_outer">
        <div class="et_search_form_container">
            <span class="et_close_search_field"></span>
            <form role="search" method="get" class="et-search-form" action="' . esc_url( home_url( '/' ) ) . '">
                <input type="search" class="et-search-field" placeholder="' . esc_attr__( 'Search &hellip;', 'Divi' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr__( 'Search for:', 'Divi' ) . '" />
            </form>
        </div>
    </div>';
}

Explanation: The wpsnippets_add_search_icon() function adds the necessary HTML markup to display a search icon in the header navigation. The search icon is wrapped in a container with the class et_search_outer and the search form is contained within the et_search_form_container div. The search form uses the et-search-form class and includes an input field for the search query.