Active Menu Items
By now you know that we have many, many tutorials related to the Divi Menu (I think this is #37!!!). And we are not stopping! There are more to come for sure. This week I want to give you the selectors needed to style and highlight the active navigation menu items in Divi in few different situations, so I hope you enjoy!
▶️ Please watch the video above to get all the exciting details! 👆
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.
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 read each title carefully to see 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 choose a few of them from this collection of four snippets. Again, please be watching the videos as I give much more context about what I mean.
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.
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 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 meant to be 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!
This solution worked beautifully with normal menulinks but it does not apply to sublink structures that lead to Woocommerce content (product categories / products). Could you please provide us with CSS that would make top level shop-link highlighted when any of the sublevel (category or product) item is active? In this case I have subcategories in the shop that go 3 levels down.
Keep in mind that when using the Divi Theme Builder, you will need to add extra classes like .et-el which you can find by inspecting the code.