Divi offers two header/navigation options: the default header and the menu module, typically used in the global header of the theme builder but adaptable for any site section.
This article will cover Divi's Menu module.
Style active menu item for the menu module:
The Divi menu module comes with a built-in feature for defining the active link color within Menu Module Settings > Design > Menu Text > Active Link Color.
Furthermore, Menu Module Settings > Advanced > Custom CSS includes a specific "Active Menu Link" field.
This allows for the application of custom styles to the active menu link. You can apply any desired CSS here. For instance, if you wish to include a bottom border for the active menu link, you can utilize the following custom CSS:
border-bottom: 2px solid #333333;
Use Custom CSS to Style The Active Menu Link Color:
We'll assign a custom CSS class to the Menu Module, ensuring that the CSS modifications are exclusive to that particular module, avoiding any impact on others. We'll use that class to add some unique CSS code to change the active menu link color.
Step 1: Assign a Custom CSS Class to the Menu Module:
In Menu Module Settings > Advanced > CSS ID & Classes > CSS Class, give the menu module a custom CSS class name. For this article, we'll use "et-custom-menu." You can follow this guide to learn more about adding a custom CSS class.
Step 2: Apply Custom CSS:
To apply the custom styles to this specific menu module, go to WordPress Dashboard > Divi > Theme Options > General Settings > Custom CSS. Alternatively, if you're using a child theme, insert the CSS codes into the style.css file of the child theme.
2.1 Apply Style/Background Color To The Active Top Level Menu Item:
/* add background color to the active top-level menu item */
.et-custom-menu .et-menu-nav>ul>li.current-menu-item {
background-color: #333;
padding: 10px;
}
.et-custom-menu .et-menu-nav>ul>li.current-menu-item>a {
padding-bottom: 0 !important;
}
2.2 Style top-level items when there's an active submenu item:
/* Add background color to the top-level items when there's an active submenu item */
.et-custom-menu .et-menu-nav>ul>li.current-menu-parent>a {
background-color: #333333;
padding: 10px !important;
}
.et-custom-menu .et-menu-nav>ul>li.current-menu-parent>a:first-child:after{
top: 10px;
}
2.3 Apply style to the active submenu item only when its parent is also active:
/* Apply style to the active submenu item only when its parent is also active. */
.et-custom-menu .et-menu-nav ul li.current-menu-item>ul>li.current-menu-item{
background-color: #333333;
}
2.4 Style any active submenu item:
/* Style any active submenu item */
.et-custom-menu .et-menu-nav ul li.current-menu-parent>ul>li.current-menu-item>a {
background-color: #333;
}
The above codes will change the background color of the active menu items in different scenarios.
The code will also add padding depending on the type of the active menu item. You can adjust the values or apply any style rather than the background color as you want.