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 covers the default menu that Divi has.
Style active menu item for the default header:
By default, we can assign a color to the active menu item from the WordPress Dashboard > Appearance > Customize > Header & Navigation > Primary Menu Bar > Active Link Color option.
If you have a fixed header, we can change the active menu item link color from WordPress Dashboard > Appearance > Customize > Header & Navigation > Fixed Navigation Settings > Active Primary Menu Link Color option.
Use Custom CSS to Style The Active Menu Link Color:
Let's say we want to change the background color for the active menu item. There are several scenarios for it to style.
The custom CSS can be added to WordPress Dashboard > Divi > Theme Options > General Settings > Custom CSS field. Or, if you have a child theme, you can add the codes to the style.css file of the child theme.
Apply Style/Background Color To The Active Top Level Menu Item:
/* add background color to the active top-level menu item */
#et-top-navigation nav#top-menu-nav>ul>li.current-menu-item {
background-color: #333;
padding: 10px;
}
#et-top-navigation nav#top-menu-nav>ul>li.current-menu-item>a {
padding-bottom: 0 !important;
}
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-top-navigation nav#top-menu-nav>ul>li.current-menu-parent>a {
background-color: #333333;
padding: 10px !important;
}
#et-top-navigation nav#top-menu-nav>ul>li.current-menu-parent>a:first-child:after{
top: 10px;
}
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-top-navigation nav#top-menu-nav ul li.current-menu-item>ul>li.current-menu-item{
background-color: #333333;
}
Style any active submenu item:
/* Style any active submenu item */
#et-top-navigation nav#top-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.