How to add description to menu items in the Divi

Jan 17, 2019 | Divi Resources

How to add description to menu items in the Divi theme

WordPress menu is mysterious and hides many features which are not often used. These features can be found on the Menu settings page of a WordPress website under “Show advanced menu properties”.

This is a hidden panel and is available once Screen Options is activated. The control is available on top-right of the menu page.

The available advanced menu properties in WordPress are:
1. Link Target
2. Title Attribute
3. CSS Classes
4. Link Relationship, and
5. Description

Divi menu description

The above points are self-explanatory and we are looking at #5 in the list – Description.

Any WordPress site can use these features. Some of them depend on the Theme and if not supported by their theme, a small tweak to theme files typically works.

The menu description is not available in Divi WordPress theme and if we add something to available Description field, it will not be rendered on the page. In order to display a custom description below the name of the menu item in Divi theme, the following steps can be followed.

It requires a child theme installed on the site as if the code meant for functions.php is added to the parent theme file, it will be lost upon a Divi theme update.

Divi menu description tutorial

Step 1: Turn on Menu Description:
This is how it is done:
a. Go to Dashboard >> Appearance >> Menu.
b. Open Screen Options (located at top right of the page) and check the Description which is under the Show Advanced Menu Properties.
c. This will enable to the Description input field to the menu items.

Step 2: Add walker_nav_menu_start_el filter to functions.php:
This is how it is done:
Open functions.php and put this code and save the file. A child theme is always recommended for this.

Step 3. Styling the Description:
Add CSS as per required styling. In our sample,we used the following classes and CSS for tweaking our design.
span.menu-item-description {
display: block;
color: #999999;
}

#top-menu li {
vertical-align: top;
}

Divi menu items description

Here is the result of the above implementation.

If you need further assistance to add a description to menu items in the Divi theme, then you can contact us without thinking twice. Or check out this blog post to add Divi menu at the bottom of the page.

Posted By:
Divya
Divya is a WordPress theme Wizard at Elicus. She loves bringing design ideas to life.

4 Comments

  1. Emma

    It worked great, I had been looking for this for a while. The only thing that does not work for me is placing the description on top of the menu item with the below code.

    #top-menu li {
    vertical-align: top;
    }

    Is there another way to do this?

    Thanks a lot 🙂

    Emma

    Reply
  2. Ayush

    didn’t work. It put all the menu items and descriptions on the same line

    Reply
    • Marshall

      Could you send the implementation screenshots to hello@ us?

      Reply
  3. Donna

    didn’t work. It put all the menu items and descriptions on the same line (exactly how you coded it with a “.” …)

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

4 Comments

  1. Emma

    It worked great, I had been looking for this for a while. The only thing that does not work for me is placing the description on top of the menu item with the below code.

    #top-menu li {
    vertical-align: top;
    }

    Is there another way to do this?

    Thanks a lot 🙂

    Emma

    Reply
  2. Ayush

    didn’t work. It put all the menu items and descriptions on the same line

    Reply
    • Marshall

      Could you send the implementation screenshots to hello@ us?

      Reply
  3. Donna

    didn’t work. It put all the menu items and descriptions on the same line (exactly how you coded it with a “.” …)

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Must Try Divi Logo Carousel Styles for Your Website

Must Try Divi Logo Carousel Styles for Your Website

If you want to build a credible and trustworthy image of your brand, showcasing logos of your trusted partners and clients would be a good idea. The most effective way to do that is using an interactive logo carousel and if you are using Divi, it offers a wide range...

How to Create a One Page Website in WordPress Using Divi

How to Create a One Page Website in WordPress Using Divi

A study found that 40% of visitors have to wait three seconds for their browser to load a website. If it doesn’t they immediately leave the webpage. This led to the rise of single-page websites. These single-page websites help in presenting a compelling message with...

Divi Construction Child Theme to Showcase Impressive Projects

Divi Construction Child Theme to Showcase Impressive Projects

Want to make an online presence of your construction business with a Divi website running on WordPress? This Divi Construction Child Theme is a perfect solution. The Divi free child theme has multiple construction layouts to showcase your projects, services, building...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts