How To Style And Highlight The Active Menu Item In Divi Tutorial by Pee Aye Creative

How To Style And Highlight The Active Menu Item In Divi

In this tutorial I will show you how to style and highlight the active menu item in your Divi navigation menu.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Add A Custom CSS Class To The Menu

The first step is to add a custom CSS class to the specific Menu module that you want to target. We do this so that the snippet does not affect all the menu modules on your site, which allows us to choose which ones remain unstyled and which ones are affected. Open the Divi Menu module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-active-menu-item” in the CSS Class input field.

style the active menu item in Divi

Add The CSS Snippet To Your Site

Next comes the CSS snippet that will be used for a base. We will explain this snippet in the video, so it will be super helpful to watch that I demonstrate each snippet. Be sure to reach each title carefully to see if which snippet you want to use. You can use more than one, but not all of them.

All of these snippets are not intended to be used together! You only need to chooose a few of them from this collecton of four snippets. Again, please be watching the videos as I give much more context about what I mean.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Apply Style To The Active Top Level Menu Item

/*apply style to the active top level menu item*/

.pa-active-menu-item .et-menu-nav>ul>li.current-menu-item>a {
	border-bottom: 2px solid red !important;
}

Apply Style To Any Active Or Normal Top Level Item If There Is An Active Submenu Item

/*apply style to any active or normal top level item if there is an active submenu item*/

.pa-active-menu-item .et-menu-nav>ul>li.current-menu-parent>a {
	border-bottom: 2px solid red !important;
}

Apply Style To Active Submenu Item Only If The Parent Is Also Active

/*apply style to active submenu item only if the parent is also active*/

.pa-active-menu-item ul li.current-menu-item>ul>li.current-menu-item>a {
	border-bottom: 2px solid red !important;
}

Apply Style To Any Active Submenu Item

/*apply style to any active submenu item*/

.pa-active-menu-item ul li.current-menu-parent>ul>li.current-menu-item>a {
	border-bottom: 2px solid red !important;
}

Code Explanation

Different Code Needed For Different Scenarios

As mentioned, the video is the best way to really learn and visually see what is going on here. Basically, there are various situations that you may face depending on the way your navigation menu is set up. For example, the CSS code selector will be different if it is in the top menu or the submenu. Also it will be different if the active menu item is a parent or child of the top main menu or submenu. Essentially this leaves us with four scenarios. You do not need all of the code given above! If you each of them, it will not work as intended. Instead you need to look carefully at each of the titles and comments in the code and only apply that particular snippet if it applies to your situation.

Other Styling Options Besides Border Bottom

In our code we are using an example of a 2px solid border on the bottom. But you can certainly change that! Our guides are men at as starting points for you to explore and learn. You may want to experiment with other things such as changing the color of the link text, or the background color. It’s up to you!

28
Last updated Aug 31, 2021 @ 9:23 am

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

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

Asset 7

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

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart