[Support request] sub menu

[melvin]

Hi,

I would like to build a sub-menu like this, for both desktop and mobile

DESKTOP
https://imgur.com/a/AvaRZwf

Mobile
https://imgur.com/a/6RIeevl

Referance: https://bench.co/catch-up-bookkeeping-service

May i know how to achieve that?

TQ

[Fernando]

Hi Melvin,

To add descriptions under your Menu Items, you would need activate Descriptions:

https://share.getcloudapp.com/d5uNjlpd

Then you would need to add this PHP snippet:

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;
}

Here is a link you may refer to with regards to adding PHP: https://docs.generatepress.com/article/adding-php/

Then, add this CSS:

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

Here is a link you may refer to with regards to adding CSS: https://docs.generatepress.com/article/adding-css/

Kindly modify this CSS according to your website’s structure.

Hope this helps! 🙂

[Chris]

Hi there,

Revisiting this thread.. I have added the PHP function through Code Snippets to my website, added the descriptions for the sub-menu items and added the relevant CSS..

The descriptions are showing on my sub-menu, however they are showing overlayed on the sub-menu items…

My website is chrispdesign.pro

[Chris]

All good, I modified the CSS to use – display: inline-block;

now my next question, is how to add spacing between the sub menu and the item description?

[Ying]

Hi Chris,

I tried to see your site but got blocked.
My IP is in Canada, can you check?

[Author]

Posts