Divi navigation menu code

The Divi theme is a popular WordPress theme that allows you to create beautiful and customizable websites. One of the key features of Divi is its flexible navigation menu. In this response, I will provide you with a code snippet that allows you to customize the Divi navigation menu.

The following code snippet demonstrates how to add a custom class to the Divi navigation menu:

function wpsnippets_add_custom_class_to_divi_menu($args, $menu) {
    $args['menu_class'] .= ' custom-class';
    return $args;
}
add_filter('wp_nav_menu_args', 'wpsnippets_add_custom_class_to_divi_menu', 10, 2);

This code snippet uses the wp_nav_menu_args filter hook to modify the arguments passed to the wp_nav_menu() function. It adds a custom class called “custom-class” to the menu_class argument, which is responsible for setting the CSS class of the navigation menu.

To use this code snippet, simply add it to your theme’s functions.php file or a custom plugin. After adding the code, the Divi navigation menu will have the “custom-class” CSS class applied to it.

This code snippet can be useful when you want to add custom styling or functionality to the Divi navigation menu. For example, you can use the custom class to apply specific CSS styles or use JavaScript/jQuery to add interactivity to the menu.

Examples

Example 1: Customizing the Divi navigation menu

This example demonstrates how to customize the Divi navigation menu by adding a custom class to the menu items.

function wpsnippets_add_custom_class_to_menu_items($classes, $item, $args) {
    if ($args->theme_location == 'primary-menu') {
        $classes[] = 'custom-class';
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wpsnippets_add_custom_class_to_menu_items', 10, 3);

In this code example, we use the nav_menu_css_class filter to add a custom class (custom-class) to the menu items of the primary menu location. This allows us to target these menu items with custom CSS styles.

Example 2: Adding a custom link to the Divi navigation menu

This example demonstrates how to add a custom link to the Divi navigation menu.

function wpsnippets_add_custom_link_to_menu($items, $args) {
    if ($args->theme_location == 'primary-menu') {
        $custom_link = '<li><a href="https://example.com">Custom Link</a></li>';
        $items .= $custom_link;
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'wpsnippets_add_custom_link_to_menu', 10, 2);

In this code example, we use the wp_nav_menu_items filter to append a custom link (Custom Link) to the menu items of the primary menu location. The custom link is added as an HTML list item (<li>) with an anchor (<a>) tag.

Example 3: Removing the search icon from the Divi navigation menu

This example demonstrates how to remove the search icon from the Divi navigation menu.

function wpsnippets_remove_search_icon_from_menu($items, $args) {
    if ($args->theme_location == 'primary-menu') {
        $items = str_replace('et-search-icon', '', $items);
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'wpsnippets_remove_search_icon_from_menu', 10, 2);

In this code example, we use the wp_nav_menu_items filter to remove the search icon (et-search-icon) from the menu items of the primary menu location. We achieve this by replacing the search icon class with an empty string using the str_replace() function.