How to make Divi active menu item background color highlight

Sep 30, 2021 | Divi Tips | 0 comments

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.
How to make Divi active menu item background color highlight

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.

/* 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 */

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.