Here’s how to style t he Divi menu
Get the look you want by understanding the CSS classes
The Divi menu is impossible to style with just the customizer. It definitely takes CSS to style it, but the problem is understanding all the different classes that make up the navigation. It’s one thing to look in your developer tools and target the menu item, but what about when fixed navigation is toggled on, or when a submenu item is active? I’ve finally compiled a list of the most helpful CSS classes you will need to understand how to style the Divi menu.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSSÂ tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Main Menu
Main Menu Links

/*main menu links*/
#et-top-navigation nav>ul>li>a {
color: red;
}
Main Menu Links When Fixed

/*main menu link when fixed*/
.et-fixed-header #et-top-navigation nav>ul>li>a {
color: red!important;
}
Active Main Menu Link

/*current main menu link*/
#top-menu li.current-menu-ancestor>a {
color: red;
}
Active Main Menu Link When Fixed

/*current main menu link when fixed*/
.et-fixed-header #top-menu li.current-menu-ancestor>a {
color: red!important;
}
Main Menu Link When One of Its Submenu Item Is Active

/*main menu link when one of its submenu items is active*/
#main-header #top-menu li.current-menu-ancestor > a {
color: red!important;
}
Submenu
The Overall Submenu

/*submenu*/
#main-header .nav li ul {
background: red;
}
Submenu List Item

/*submenu list item*/
#main-header .nav li li {
background: red;
}
Submenu Links

/*submenu links*/
#main-header .nav li li a {
color: red;
}
Submenu Links When Fixed

/*submenu links when fixed*/
.et-fixed-header #top-menu li li a {
color: red!important;
}
Active Submenu Link

/*active submenu link*/
#top-menu li.current-menu-item>a {
color: red!important;
}
Active Submenu Link When Fixed

/*active submenu link when fixed*/
.et-fixed-header #top-menu li.current-menu-item>a {
color: red!important;
}
Hi!
Is there a chance to create the output of a menue like this:
Level 1 items on the top of the content horizontally (hide levels > 1)
Levels >2 of the active level 1-item vertically in a sidebar? (hide level 1)
I need this… an example (not WordPress) : https://www.lyriktext.de
Cheers, Connie
For the record, I’m working on a fully expanded menu so I can place where I want. I’m really worried about the check mark in the menu that says there are submenus under it. This check mark is in the top right and I want that next to the text ? How do I do that?
Hi Paul!
Could you please share the URL of the page for me so I can check it?
Hey Nelson. First off thanks so much for bringing so much to the divi community. Love your tuts. I have a questions related to the Dropdown Menu Line. I’m able to push the line/submenu down, but there is then a blank space where it comes off hover on mouse-out and the submenu disappears. Any ideas on how to properly fix this with Divi? Maybe to extend out the div of the submenu so mouse-out doesnt happen?
Hi. I’m using the divi default menu and yes everything works as expected but when we’re in the store page or any other sub page of the store page (like category pages or product pages), the styling of sub menu links or items doesn’t work (they react in their default way). And I’m not talking about only store page subites or sublinks. It’s like when we’re in store page or any other sub page of the store page (like category pages or product pages), it’s like another menu becomes active so we’re not targeting the parts we one. Please help.
Hi Umut,
That’s pretty weird. The only thing I can think of is that WooCommerce is overriding something. You should definitely ask Elegant Themes support about it.
Yesterday, all day long, 3 different support guys tried to no avail
hi, how can I change widget navigation menu active link color
The full CSS selector would look like this “.et_pb_widget li.current-menu-item a”
We have done this on our child themes like here: https://demos.peeayecreative.com/divi-paving/services/asphalt-millings/
Thanks for those, very very VERY useful !
You are welcome! I actually refer to it quite often myself! 🙂