Code by Day | Explore By Weekend

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

13
Last updated Jan 3, 2021 @ 1:15 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
V. Vega
V. Vega
1 year ago

Thanks for those, very very VERY useful !

abrar
abrar
8 months ago

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

Umut
Umut
7 months ago

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.

Last edited 7 months ago by Umut
Umut
Umut

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

Bryan
Bryan
3 months ago

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?

Last edited 3 months ago by Bryan

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart