- This topic has 4 replies, 4 voices, and was last updated 3 years, 3 months ago by
Ying.
-
AuthorPosts
-
February 9, 2022 at 8:25 pm #2111693
melvin
Hi,
I would like to build a sub-menu like this, for both desktop and mobile
DESKTOP
https://imgur.com/a/AvaRZwfMobile
https://imgur.com/a/6RIeevlReferance: https://bench.co/catch-up-bookkeeping-service
May i know how to achieve that?
TQ
February 9, 2022 at 10:03 pm #2111778Fernando Customer Support
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! 🙂
January 6, 2023 at 7:00 pm #2486556Chris
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
January 6, 2023 at 7:09 pm #2486566Chris
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?
January 6, 2023 at 7:26 pm #2486575Ying
StaffCustomer SupportHi Chris,
I tried to see your site but got blocked.
My IP is in Canada, can you check? -
AuthorPosts
- You must be logged in to reply to this topic.