[Resolved] Adding Description Under Menu

[Yomi]

Hi Tom,

I want to show the menu item description under the menu item tabs… Could you please help with this

I have attached an image of what I am trying to do below

Description Below menu items

Kind regards

[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.

[Yomi]

Hi Tom,

Thanks for the response.

As soon as I place the code you have given me in the functions file I do get the following error

Fatal error: Cannot redeclare generate_nav_dropdown() (previously declared in /home/XXXXX/public_html/wp-content/themes/XXXXXXX/functions.php:24) in /home/XXXXXXX/public_html/wp-content/themes/generatepress/inc/navigation.php on line 216

Any ideas?

[Tom]

Sorry about that – can you try the updated code?: https://generatepress.com/forums/topic/adding-description-under-menu/#post-203056

[Yomi]

Thanks Tom,

It works perfectly now 🙂

Kind regards

[Tom]

You’re welcome 🙂

[Joel]

Unfortunately, this adds another toggle icon for parent menu items. I added a Menu Description to the first sub-menu item (Balance).

Before:

After:

Removing the line $dropdown = ( in_array( 'menu-item-has-children', $item->classes ) ) ? true : false; resolves it for me.

I also removed the padding and margin from the CSS, as it was adding padding for empty <span class="description"></span> elements.

Cheers!

[Tom]

Hi there,

I’ve just updated the code above to be compatible with the latest GP: https://generatepress.com/forums/topic/adding-description-under-menu/#post-203056

Thanks!

[Joel]

Champion! Thanks 🙂

[Ragunaath]

Hi tried using the menu description function using codesnippets plugin, it returned syntax error!

[Pete]

This would a great addition as an option in the customiser 🙂

[Leo]

I just copied and pasted the Tom’s code in Code Snippet but not getting syntax error?

[Stephane Bergeron]

Hey there!

I’m sorry to revive this old thread but, I tried the code and it works great for me. I’ve applied the code here:

https://sandbox.pixelyzed.com/gps/

…in order to test for a client and it’s almost perfect out of the box. I was just wondering if there’s an easy way to make each menu item the full height of the <nav> bar regardless if they have a description or not or some descriptions are on 1 line while others are on two lines.

Thanks!

Started building our 3rd site with GeneratePress this week, ours and 2 client sites. This would be the 2rd client site 🙂

[Tom]

Hi there,

Give this a shot:

.main-navigation .main-nav ul li a {
    height: 100%;
}

#menu-main-navigation {
    display: flex;
}

Let me know 🙂

[Kyro Peregrin]

Thanks… But how to manage to make it the same padding and margin while it is in sticky navigation on desktop.?

It’s making a big Gap of the menu name and description, so it’s making the sticky navigation much taller.

[Author]

Posts