Show Description Text under every Menu Item in Astra Theme

Want to add additional description text below every menu item in the header area of the Astra theme? This can be achieved using the description option in WordPress. Once you enable this option, output this description text using custom PHP code and style it using custom CSS code.

Preview: Menu items with Description Text

Menu description

Adds description below the menu items

Enable Menu Description option

By default the menu description option is disabled on a WordPress websites. First, we need to enable this description option.

  1. In WordPress Dashboard, go to Appearance -> Menus page.
  2. Click Screen Options at the top right corner.
  3. Under Show advanced menu properties section,  click to check the Description option.

Enable descriptions option

Create a New Menu & Enter Description

Now we shall add description text to menu items. If there is no menu already created, you can create one by following this guide.

  1. Go to the specific menu item for which you want to add description text.
  2. Click on the arrow icon at the top right corner of the menu item to expand it.
  3. Add the Description text (For example, Overview).
  4. Click the Save Menu button to save your changes.

Enter Description

PHP Snippet

Once description text for menu items have been added in the WordPress Dashboard, we need to show that in the front-end of the website. Add the following code in the functions.php file of your Astra Child Theme to display description text for menu items.

CSS

Add the following CSS code to your website by going to Appearance -> Customize -> Additional CSS box or paste in the Astra child theme’s style.css file. You can customize this code further depending on specific CSS styling you need.

Share this Tutorial

Leave a Comment