Pricing Process Reviews Contact

Divi Guy blog

How to make Divi active menu item background color highlight

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.

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

Need a hand?

Need help with your Divi website?

Book a Divi consultation and we can fix it together over Zoom, or ask for an estimate for bigger jobs.

0 Comments

Submit a Comment

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

Search

Browse

More tips

Got a question?

Ask me anything

Stuck on something in Divi or WordPress? Ask away and I will reply by email, usually within 24 hours.

Ask a Question

Tell me about your project. The more details the better.

"*" indicates required fields

Make a payment

Got an invoice?

Pay an invoice, a deposit or a tip in about a minute. Card or PayPal, secure checkout, and I never see your card number.

Make a payment