Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
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.

▶️ 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.

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

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. 

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

50 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. ECDJ <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    Love this! Would be even nicer if we could get the second line revealed by hover. Any ideas on how to achieve that?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply

Comments By Others

  1. Michaela T.

    Hi, thank you for this solution, it’s great on desktop. But on mobile I have a problem – the text from the second row is not in the second row 🙂 it starts right after the submenu item name. How can I please make it so that also on the mobile version the text is on the second line? Thank you.

    Reply
    • Hemant Gaba

      Hi Michaela!

      Can you share the URL of the page to check further?

      Reply
  2. Richard

    Hi Team, thanks for all your tutorials. Really helps a lot!

    For some reason it is working perfectly on the desktop, but not on mobile

    Reply
    • Hemant Gaba

      Hi Richard!

      Could you please share the URL of the page for me to investigate further?

      Reply
      • Hemant Gaba

        Hi Alex!

        I’m not able to see any menu item which is rendering the HTML. Can you please let me know on which menu item did you apply the changes?

  3. Jasmin

    This is awesome. Would you mind helping me with achieving this: I have two menu items and I want to show one line of text centered above those items. Looking forward to your help since you are my last chance to please my client 😀

    Reply
    • Hemant Gaba

      Hi Jasmin!

      Could you please share the URL of the page for me to investigate further?

      Reply
  4. Paul Swafford

    just quietly – thanks for this .. I found I had to add display:block to both the menu item and the span in css to get this to work.
    I’m not using this on DIVI

    Reply
  5. Coil

    Even using display:block; the second text remain in the same line

    Reply
    • Hemant Gaba

      Hey Coil,

      I cannot see any second text beside or under the menu item so could you please place that and let me know so that I can investigate the issue?

      Reply
  6. Karel

    I would like to use this on my website, but the span text is on the same height as the menu item

    check: https://bit.ly/2W6MDVw

    what am i doing wrong here?

    Reply
    • Hemant Gaba

      Hi Karel,

      The code is working perfectly fine on my end. It would be great if you please share the URL of the website as it would be easy for us to investigate the issue.

      Reply
      • Karel

        That went perfect Hemant,

        thanks for the help and support!

      • Hemant Gaba

        You’re Welcome. 🙂

        Let me know if you need any further assistance.

      • Hemant Gaba

        Apologies for the confusion. Go to Divi > Theme Options > Custom CSS Panel and place the code given below:

        .et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li>a, .et_pb_menu--with-logo .mobile_nav >ul>li>a {
        flex-direction: column;
        gap: 8px;
        display: flex !important;
        }

        Let me know how it goes. 🙂

  7. Kristina

    Iv’e been searching everywhere for this! Thank you! I followed it to a T but still cannot get the text to show correctly :(. Any advice on things I could look into? I have the header style with the inline logo if that means anything. I did some testing and if I remove the logo it’s ok and works fine- but for some reason with it there it will not work.

    Also bookmarking your blog and signing up for notifications because you have some really cool stuff here!

    Thank you!

    Reply
    • Hemant Gaba

      Hi Kristina,

      I just checked the information that is in the guide and it is perfectly fine. I just checked your website and you haven’t added any span to the Menu items till now so I suggest you please follow the steps of the guide and then if you face any issue, share the URL and I’ll test that.

      Let me know how it goes. 🙂

      Reply
  8. Brenda Scott

    This is exactly what I was looking for!

    But….Im trying to figure out the CSS so that the active link color applies also to the span…..

    How do I do that?

    Thank you!

    Reply
    • Hemant Gaba

      Please paste the code given below in the Divi > Theme Options > Integrations > Head Panel and change the red color to the active link color:

      jQuery(document).ready(function(){
      /*here you need place the color that you want to give to the span when the Menu item is active in place of red*/
      jQuery(“.nav li.current-menu-item a span”).css(“color”, “red”);
      })

      Make sure to place the code inside the script tags.

      Let us know how it goes. 🙂

      Reply
      • Brenda Scott

        Oh that is absolutely perfect! Thank you!!!

      • Hemant Gaba

        I am glad that the issue is resolved now. 🙂

      • Brenda Scott

        https://aninstructionalquest.com

        My goal is that active link has both lines gold instead only top line.

        Thank you for helping me!

      • Hemant Gaba

        Ah, I saw the issue. The code is actually correct, but the selector’s and color’s quotes are getting uploaded differently in WordPress comments. Please go to this link and copy the code from there and use it: https://www.codepile.net/pile/1DpRV7OK

        I have added the selectors for the dropdown as well to change the color of the span below the dropdown menu item. Please let us know how it goes. 🙂

      • Brenda Scott

        Nothing changed…..here is what I put in:
        jQuery(document).ready(function(){
        jQuery(“.nav li.current-menu-item a span”).css(“color”, “#e09900”);})

      • Hemant Gaba

        Could you please share the URL of the page for me to investigate further?

  9. Tafo

    Hi Nelson,
    I have been following your YouTube channel for some time now and I’m really happy with your work and products. I decided to register today to be part of your community. Your tutorials are amazing. I like every single insight you have introduced. I have gained a lot from your tutorials. Please keep it up. I’m currently working on a couple of websites and you are my “supervisor” really.

    Reply
  10. Earl

    Hmm for some reason the text remains on online despite the Content: block; CSS. It refuses to wrap down.

    Reply
  11. Susan

    I’ve tested this using your exact CSS and the SPAN, but the SPAN section does not bump down onto the next line. Thoughts?

    Reply
  12. Rus

    Legend! Thanks mate, been trying to figure it out for weeks. Thanks a lot. Keep up the good work. Subscribed to your channel!

    Reply
  13. Rafa

    Hi Nelson,

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

    Thanks

    Reply
  14. Samson

    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 👍

    Reply
  15. Britt

    Cool idea!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart