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

Nelson Miller Pee Aye Creative
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.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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. 

Last updated [last-modified %date%]


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


  1. Britt

    Cool idea!

  2. 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 👍

  3. Rafa

    Hi Nelson,

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


  4. Rus

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

  5. 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?

  6. Earl

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

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

  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!

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

      /*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. 🙂

      • Brenda Scott

        Nothing changed… is what I put in:
        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?

      • Brenda Scott

        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:

        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

        Oh that is absolutely perfect! Thank you!!!

      • Hemant Gaba

        I am glad that the issue is resolved now. 🙂

  9. 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!

    • 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. 🙂

  10. Karel

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


    what am i doing wrong here?

    • 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.

      • 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. 🙂

      • 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.

  11. Coil

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

    • 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?

  12. 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

  13. ECDJ

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

    • Nelson Lee Miller (aka The Divi Teacher)

      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.

  14. 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 😀

    • Hemant Gaba

      Hi Jasmin!

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

  15. 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

    • Hemant Gaba

      Hi Richard!

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

      • 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?

Submit a Comment

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

Recent Posts


Your Cart