Code by Day | Explore By Weekend

Second Line of TextSecond Line of TextSecond Line of Text Tutorial by Pee Aye Creative

How To Add A Second Line Of Text To Your Divi Menu Items

This tutorial will show you how to add a second line of text to your Divi menu to give extra info or style or to call out menu items in WordPress.

Add A Second Line of Custom Text Below the Menu Links

The first step we need to do to add text to our menu links is to edit the menu in WordPress. To do this, go to your WordPress dashboard to Appearance>Menus. Here you will either create a new menu or edit an existing one. Choose the menu you want to add the additional line of text to, and click on dropdown icon on the menu item to expand it open.

add custom text to a WordPress menu item

The next step is to add a span tag to the menu item.

A span tag is used to add a new inline element inside an existing element. So adding a span tag to the menu item creates a new separate part of the menu text for us to edit and style.

So here’s what you need to do to add a span tag and custom text to the menu item:

1. Add a new <span> tag after the menu item label
2. Write your custom second line text
3. Add a closing </span> tag

Here’s an example:
Menu Item<span>A second line of text here</span>
Here’s how it would look after you add those items:
adding span tags to the WordPress Divi menu to add a second line of text

Go ahead and do this to any of the menu items where you want there to be a second line of text. If you are doing it to one, chances are you should do it to the others for consistency in style (watch the video for a good example).

Style The Second Line Of Menu Text

Now that the text is in the menu link, it looks bad (as expected because so far we only added more text to the menu item).

adding custom text to a WordPress Divi menu
So we need two style it to accomplish two things. First, we need to move the new text to a new line. We do this by making the <span> tag displayed as a block element instead of inline (this is CSS terminilogy, just ignore it if you are unfamiliar with it). The second thing is to style the text if you want it to have a different font style, color, size, etc. from the the main menu item. We’ll do these things in CSS. We have provided an example below.

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.

/*style the second line text span tag*/

.nav li a span {
	display: block;
	color: #aaaaaa;
	font-size: 80%;
	font-style: italic;
	letter-spacing: 1px;
	line-height: 1.7em;

Here’s how our example looks now:

styling the second line of text in a WordPress Divi menu 1

From here you can modify this CSS snippet however you want. You can pretty much do anything you want to this. You can change the text color, change the font style, font size, align the text, add a border, or anything at all. 

Last updated Jan 3, 2021 @ 12:46 pm

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

Recent Posts

Leave A Response!

Notify of
Newest Most Voted
Inline Feedbacks
View all comments
3 months ago

Cool idea!

3 months ago

Nice! I found this cool idea on Divi Soup. I already did this on 2 websites and I bet I will use it again. When you need a few more words and save some space 👍

3 months ago

Hi Nelson,

Really nice, but it doesn´t work for mobile?



Desktop view

Reply to  Rafa
3 months ago

Tablet view

3 months ago

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

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest


Your Cart