Q5: Adding Subtitles to the Primary Menu

by | May 5, 2016 | CSS Tips & Tricks, Menus

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Quick Snack: 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

Adding subtitles to the primary menu tutorial for divi

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.

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.

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:

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 { 
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

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. 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.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

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

You have successfully joined the waitlist!