Mega menu with Description & icon

Hi,
Thank you for your patience, to add the descriptions below the mega menu items and show a icon next to the menu items:

Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function enfold_menu_description($item_output, $item, $depth, $args) {
    if (!empty($item->description)) {
        $item_output .= '<span class="menu-description">' . esc_html($item->description) . '</span>';
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'enfold_menu_description', 10, 4);
function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
function add_icon_to_menu_item($item_output, $item, $depth, $args) {
    // Get the custom icon class from the menu item's CSS Classes
    $custom_classes = implode(' ', $item->classes);
    preg_match('/menu-item-icon-([^ ]+)/', $custom_classes, $matches);

    if (!empty($matches[1])) {
        // Use the custom icon class specified in the menu item
        $icon_class = esc_attr($matches[1]);
        $icon = '<i class="fa ' . $icon_class . '"></i>';
        $item_output = $icon . $item_output;
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_icon_to_menu_item', 10, 4);

The first one adds the description below the menu item, the second one adds the Font Awesome icons because it is easier to use a class name to determine the icon used, entypo-fontello icons don’t use class names the same way, and the third function adds the icon next to the menu item based on the class used in the menu item.
So to show the menu item description and custom classes please enable it in the menu page screen options at the top of the page:

then add your description and the icon you want to use in this format menu-item-icon-fa-users
the first part menu-item-icon- tells the function that a icon will be used, and then the Font Awesome Icon code is appened to the class fa-users

these are the classes I used in this example:
menu-item-icon-fa-users
menu-item-icon-fa-phone
menu-item-icon-fa-question
menu-item-icon-fa-life-ring
then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #header .avia_mega_div > .sub-menu > li > ul > li.menu-item > i ~ a {
	display: inline-block;
}
#top #header .avia_mega_div > .sub-menu > li > ul > li.menu-item .menu-description {
	display: block;
    padding: 0 25px;
}

Please give this a try.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
If you are not using a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets, because you will lose the custom code that you add to the enfold ▸ functions.php when you update next time.

Best regards,
Mike

Hi,
Glad that this helped, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike