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
Enable Menu Description option
By default the menu description option is disabled on a WordPress websites. First, we need to enable this description option.
- In WordPress Dashboard, go to Appearance -> Menus page.
- Click Screen Options at the top right corner.
- Under Show advanced menu properties section, click to check the Description 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.
- Go to the specific menu item for which you want to add description text.
- Click on the arrow icon at the top right corner of the menu item to expand it.
- Add the Description text (For example, Overview).
- Click the Save Menu button to save your changes.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/** * Displaying the description below the menu item */ function wpd_astra_nav_menu_items_description( $output, $item, $depth, $args ) { if ( ! empty( $item->description ) ) { $output = str_replace( $args->link_after . '</a>', '<span class="menu-item-description">' . $item->description . '</span>' . $args->link_after . '</a>', $output ); } return $output; } add_filter( 'walker_nav_menu_start_el', 'wpd_astra_nav_menu_items_description', 90, 4 ); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@media only screen and (min-width: 922px) { .main-header-menu > .menu-item > a { height: auto; flex-wrap: wrap; -webkit-flex-wrap: wrap; text-align: center; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; line-height: 1.5; } .menu-item-description { color: #777; clear: both; font-size: 12px; flex: 0 0 100%; } } @media only screen and (max-width: 921px) { .menu-item-description { display: none; } } |
This was very helpful. Thanks for shating