How to customise your main menu in Divi

To customise the main menu in Divi add the following code in WordPress to Divi /Theme Options /General /Custom CSS

This customisation:

  • Adds an underline when you hover over the menu item
  • Turns menu item text Red when you hover over the menu item
  • Turns the menu item text Red when menu item is selected/active

/* Main Menu hover */
#top-menu-nav #top-menu a:hover,
#mobile_menu_slide a:hover {
color: red !important;
text-decoration: underline;
opacity:1 !important;

/* Main Menu active */
#top-menu li.current-menu-item > a {
color: red;
text-decoration: underline;

You may change color: red in the above code to any colour you like, even a colour value from w3schools colour picker

  • customise main menu divi
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

6 of the best online bookings plugins for WordPress

Whether you run a hair salon, work as a consultant or manage a hotel or guesthouse, being able to...

Change Divi Primary Menu font weight

In order to change your Divi Primary Menu font weight then insert the following css code under...

Divi Layout & Typography Customizer Settings

In Divi Theme you can customize just about everything when it comes to layout & typography....

Divi Resources Blog

Stay up to date with Elegant Themes most recent news and updates...

Documentation and Tutorials

Please click on the link below for useful tutorials on using Divi Builder to build your perfect...