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;
}
/*submenu*/

#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;
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

11 Comments

  1. V. Vega

    Thanks for those, very very VERY useful !

    Reply
  2. abrar

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

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

    Reply
      • 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?

    Reply
  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?

    Reply
    • Hemant Gaba

      Hi Paul!

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

      Reply
  6. Connie

    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

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart