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.

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.

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. 

26

Last updated Aug 31, 2021 @ 11:19 am

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.

OUR ONCE A YEAR SALE IS HAPPENING NOW!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

37 Comments

  1. Britt

    Cool idea!

    Reply
  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 👍

    Reply
  3. Rafa

    Hi Nelson,

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

    Thanks

    Reply
  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!

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

    Reply
  6. Earl

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

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

    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

        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?

      • 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

        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!

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

Submit a Comment

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

Asset 7

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

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart