How To Style The Divi Menu

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.

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

28

Last updated Jan 3, 2021 @ 1:15 pm

Subscribe

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 🙂

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

8 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
    • 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.

      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

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart