Add More Context And Uniqueness To Your Menu
Sometimes you want to add extra text to menu time in WordPress on a second line, but there is no built-in way to do this. With this tutorial, I’ll show you how easy it is to add a second line of text to your menu using the Divi Theme. This can be a fun and helpful way to add more context to your menu links, and since this is unique, it will help your site stand out. You could add a callout, explain the link, or add a clever phrase. You can see how to do all of this in the video, and use the snippet below to style it. This would go great with some of our other Divi Menu tutorials!
▶️ Please watch the video above to get all the exciting details! 👆
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.
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>
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).
So we need to 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 terminology, 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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about 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:
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.
Love this! Would be even nicer if we could get the second line revealed by hover. Any ideas on how to achieve that?
Sure, so this would be easy by simply adding the CSS selector “hover” to the code so that some specific property and value only applies when you hover. In this case the display property is the main thing, like display: none; regular and display: block; on hover.