How to make Divi active menu item background color highlight

TIPS

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.
[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

Submit a Comment

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

More Tips

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Cloudways Hosting

WPEngine Hosting

Pressable Hosting

AccuWeb Hosting

Ask the Divi Guy a Question

"*" indicates required fields