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. 

20

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Britt
21 days ago

Cool idea!

Samson
21 days 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 👍

Rafa
Rafa
14 days ago

Hi Nelson,

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

Thanks

Rafa
Rafa

Desktop view

Captura.PNG
Rafa
Rafa
Reply to  Rafa
14 days ago

Tablet view

Captura2.PNG

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 3,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart