How To Style The Divi Menu Tutorial by Pee Aye Creative

How To Style The Divi Menu

Nelson Miller Pee Aye Creative
Are you trying to style the Divi menu? Here's a complete guide that will help you use CSS to get the look you want.

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

#et-top-navigation nav>ul>li>a {
color: red;
/*main menu link when fixed*/

.et-fixed-header #et-top-navigation nav>ul>li>a {
color: red!important;
/*current main menu link*/

#top-menu li.current-menu-ancestor>a {
color: red;
/*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 items is active*/

#main-header #top-menu li.current-menu-ancestor > a {
color: red!important;

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

#main-header .nav li li {
background: red;
/*submenu links*/

#main-header .nav li li a {
color: red;
/*submenu links when fixed*/

.et-fixed-header #top-menu li li a {
color: red!important;
/*active submenu link*/

#top-menu li.current-menu-item>a {
color: red!important;
/*active submenu link when fixed*/

.et-fixed-header #top-menu li.current-menu-item>a {
color: red!important;

Last updated [last-modified %date%]


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


  1. V. Vega

    Thanks for those, very very VERY useful !

  2. abrar

    hi, how can I change widget navigation menu active link color

  3. Umut

    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.

    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      • Umut

        Yesterday, all day long, 3 different support guys tried to no avail

  4. Bryan

    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?

  5. paul

    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?

    • Hemant Gaba

      Hi Paul!

      Could you please share the URL of the page for me so I can check it?

  6. Connie


    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) :

    Cheers, Connie


Submit a Comment

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

Recent Posts


Your Cart