Q5: Adding Subtitles to the Primary Menu

In this quick snack I am going to show you how to easily add subtitles to the primary menu in Divi

You can see an example of this in my menu on this site (in case I have changed it since writing this I have included an image below ). This effect can be used to give a little more detail about what each page is about

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes

Cooking time

This should take you around 5 minutes max.

Preparation

The first thing we need to do is add the subtitles to our menu, so navigate to Appearance>Menus and make sure you have your primary menu selected.

Next, we are going to add a Span to the Navigation Label of each menu item and include the text we want to use as the subtitle. We do this by adding the following directly after the menu item name.

<span>Subtitle Text</span>

Do this for each menu item and then hit Save Menu.

Method

Next we need to add some CSS to get the subtitle on a line below the actual menu item, so copy and paste the CSS below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section.

I have added some styling to make the text italic, align it centrally below the main menu item and reduce the padding. You can play with these values to get it looking how you want.

#top-menu > li > a span {
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
        float: left;
	width: 100%;
	padding: 5px 0;
}

#top-menu a {
        text-align: center;
}

#top-menu li {
   padding-right: 0;
}

So that is the primary menu sorted, but what about the mobile menu? You can use the same CSS for the mobile menu as well but I prefer to have the subtitle on the same line in the mobile menu like this:

We are going to add a colon and a space between the menu item and the subtitle as well, here is the CSS.

.et_mobile_menu li a span {
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	float: none !important;
	width: 100%;
	padding-bottom: 8px;
}

.et_mobile_menu li a span:before {
    content: ":  ";
}

So that is basically it. However, if your subtitles are longer than your actual menu items you may run into some issues with the menu wrapping before it switches to the mobile menu at 980px by default.

If you have this issue you can change the point at which the mobile menu kicks in using the CSS media query below, just change the value 1024px to that which fits with the number of items you have in your menu.

@media only screen and ( max-width:1024px ) {
#et_mobile_nav_menu { 
display:block 
}
#top-menu-nav { 
display:none; 
}
} 

And that’s it. Enjoy!.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X