Make the Divi active menu item background color highlight (like the image below) is something Divi does not have settings for. This can be tricky depending on things like font sizes, number of menu items, sizing, design requirements, etc.
Add the following CSS to the Divi Options / Custom CSS (without style tags) or Integration / Head area.
TIP: Play around with the padding and margins in the custom CSS. And, sometimes you may need to adjust the height values in the section, row, and/or menu module to get it looking the way you like.[css]
/* Main menu active menu background - BEGIN */
.et_pb_menu--style-left_aligned #et-top-navigation nav > ul> li > a,
.et_pb_menu--style-left_aligned .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 15px;
}
#menu-main-menu li {
padding-right: 5px;
}
#menu-main-menu li a {
padding: 18px 15px;
}
#menu-main-menu li.current-menu-item > a {
background: #273e6a;
}
#menu-main-menu .menu-item-has-children > a:first-child:after { /* moving the dropdown arrow icon */
top:18px;
right: 0px;
}
/* Main menu active menu background - END */
[/css]
0 Comments