Follow us

Adding subtitles to the primary menu in Divi | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

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 wink ). This effect can be used to give a little more detail about what each page is about

Adding subtitles to the primary menu tutorial for divi

So let’s get cooking!



The Divi Theme from Elegant Themes


Cooking time


This should take you around 5 minutes max.




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.

Adding subtitles to the primary menu tutorial for divi

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>

 Adding subtitles to the primary menu tutorial for divi

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




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:

Adding subtitles to the primary menu tutorial for divi

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 { 
#top-menu-nav { 


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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!