How to Display Menu Description Text using Custom PHP Code in Sub Menu WordPress | Submenu Dropdown

In this wordpress tutorial for beginners you will learn how to add / show menu description text under submenus using custom php code with some css style in website with description enable from screen options.

* Find Snippet in Top Pinned Comment Section.

* Add this CSS:

.menu-item-description {
display: block;
font-size:12px !Important;
}
.menu a {
vertical-align: top;
}

* in css you can styling according to your requirement. if you face any issue in menu item description alignment then you can add some margin left right to adjust it.

#menudescription #submenu #customcode #wpcode #css #php #wordpress #wordpresstutorial #webtaskwithhassan #hassangilani

[WebTaskWithHassan]

Use this code:

function prefix_nav_description( $item_output, $item, $depth, $args ) {
if ( !empty( $item->description ) ) {
$item_output = str_replace( $args->link_after . '</a>', '<span . $item->description . '</span>' . $args->link_after . '</a>', $item_output );
}

return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );



Use this css:

.menu-item-description {
display: block;
font-size:12px !Important;
}
.menu a {
vertical-align: top;
}

[AndrejaTrajkovic]

Using this CSS code, the description is still showing inline(in 1 line) instead of block(below the sub-item "heading/name"). Any idea why this issue occurs and how to solve it?