Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1419705


    I would like to create a mega menu like this: (under products and support)

    – The Icon I can tackle with a plugin that does menu icons (it would be awesome to be able to use the icon packs from the enfold theme settings)
    – The spacing I can work out in css.. a bit of a hassle.. but I’ll manage..
    – The description get’s used for titles now (not semantic) and only presents and OR option.. I’d love to be able to use menu items with descriptions

    So.. my question pertains especially to the last point.. is the some little code I can put in the functions.php so that the description get’s rendered as well as the link?

    (You can consider the whole thing a feature request as well)


    at the moment the options to build really cool mega menu’s only seem to come from Elementor.. and I’m just to invested in Enfold to switch :-P



    So to simplify my question.. is there a way to display both the Menu Title AND the description?


    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', '');
    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:

    then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top #header .avia_mega_div > .sub-menu > li > ul > > i ~ a {
    	display: inline-block;
    #top #header .avia_mega_div > .sub-menu > li > ul > .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,


    Thanks!! That is awesome.. If I copy the code to my functions it results in a critical error tho :-(


    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,


    Oke.. tried the whole thing another time and now it works..

    Still stays weird.. it ain’t my first time editing a child theme :-P I’ve build a 100+ websites with Enfold ^_^

    anyway.. Thanks a lot! I was kinda desperate.. Good Mega menu option are hard to come by.. and this goes a long way :-)


    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,

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Mega menu with Description & icon’ is closed to new replies.