Every WordPress theme has at least 1 or more navigation menus. Header menus are a must for any WordPress theme. Some WordPress themes have multiple menu locations such as in the header, sidebar and footer section.
When you create a new navigation menu in WordPress, From the Screen Options menu, You can check the Description feature. After enabling this feature, You can add a description for each menu item.
In the above screenshot, You can see this how to enable Description feature and add menu item description.
Afetr adding the description, When you visit the front end of your website, You can not see the description of your menu items.
It is because many themes do not add support for this feature. You will have to add a function to your WordPress child themes functions.php file or you can add the function in custom-functionality-plugin.
Copy the following code and paste in functions.php file. This code will add support in your theme to display the menu item descriptions on the front end.
//https://createwptheme.com/wordpress-menu-item-descriptions
function prefix_nav_description( $item_output, $item, $depth, $args ) {
if ( !empty( $item->description ) ) {
$item_output = str_replace( $args->link_after . '', '' . $item->description . '' . $args->link_after . '', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );
After adding the above code in cusom functions plugin or child theme’s functions.php file. Go to Appearance – Menus and select your primary menu. Add description for all of selected menu items and save changes.
Visit the front end of your site and refresh the page to view changes. If you don’t see the menu item description, make sure you have selected the correct display location for your menu.
Now we need to style the menu description. Add the following CSS code in your child theme’s style.css file or you can go to Appearance – Customize – Additional CSS.
/*Menu item description*/
/*https://createwptheme.com/wordpress-menu-item-descriptions*/
.menu-primary a {
vertical-align: top;
}
.menu-item-description {
display: table;
color: #FFEB3B;
font-size: small;
}
.main-navigation li{
border-bottom: none;
}
In the screenshot above, You can see the final result.
Feel free to change the color of menu description with something suitable to your theme’s color scheme. Simply replace #FFEB3B with your desired color.
You migh also need to change the .menu-primary a with your navigation menu class or id, because not all theme developers use the same class or id for navigation menus.
How to find your WordPress navigation menu CSS class or ID?
Open your website in Chrome, Firefox or any other browser of your choice and open developer tools. In Google Chrome, Right click anywhere on the screen and select Inspect or Press Ctrl+Shift+I to open developer tools.
Use the selector tool and move the selector to your navigation menu and click on it to highlight the HTML code in the Elements tab.
In the above screenshot, You can see the id="menu-home" and class="menu-primary" for the navigation menu.
Conclusion
That’s all. It is a very simple and easy process and you don’t need to be a WordPress expert to make these changes.