Reply To: Adding Description Under Menu

[Tom]

Hi there,

Adding menu descriptions requires some custom programming.

Maybe something like this:

add_filter( 'walker_nav_menu_start_el', 'tu_menu_item_description', 10, 4 );
function tu_menu_item_description( $item_output, $item, $depth, $args ) 
{
	// If we're working with the primary or secondary theme locations
	if ( 'primary' == $args->theme_location || 'secondary' == $args->theme_location || 'slideout' == $args->theme_location ) {
		$item_output = str_replace( $args->link_after . '</a>', $args->link_after . '</span><span class="description">' . $item->description . '</span></a>', $item_output );
	}
	
	// Return the output
	return $item_output;
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

Then you’ll need some CSS:

.menu-item .description {
    display: block;
    line-height: initial;
    padding-bottom: 1em;
    margin-top: -1em;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

It’ll still need some more CSS tweaking, but it should get you on your way.

It will also only work/look good if every menu item has a description.

• This reply was modified 7 years, 10 months ago by Tom.