Add Imageto Mega Menu

Hi John,

That's quite tricky to do and refine but it should be possible by filtering the menu item objects.

See this stackoverflow answer - https://wordpress.stackexchange.com/a/87027

Hi Elvin,

Thank you for the reply.
So that code seems to replace the text with the image - is that correct?
I am looking to have both - is that possible via this method?

And obviously this seems a little more involved than copy/paste some filters.

Is this beyond scope support?

The filter is an example of how it's going to be possible but I'm not exactly sure how you want things to be laid out exactly or if there's any specific behavior you wish to add.

But we can modify this filter or expand it to add more.

Like changing the foreach loop to this:

    // edit the menu objects
    foreach ($sorted_menu_objects as $menu_object) {
        // searching for menu items linking to posts or pages
        // can add as many post types to the array
        if ( in_array($menu_object->object, array('post', 'page', 'any_post_type')) ) {
            // set the title to the post_thumbnail if available
            // thumbnail size is the second parameter of get_the_post_thumbnail()
			$thumbnail = '<div class="menu-thumbnail">'.get_the_post_thumbnail($menu_object->object_id, 'thumbnail').'</div>';
			if (has_post_thumbnail($menu_object->object_id)) {
				$menu_object->title = $thumbnail.'<span class="menu-item-label">'.$menu_object->title.'</span>';
			}
            
        }
    }

And add this CSS:

ul.sub-menu li.menu-item a {display: flex !important;align-items: center;}

ul.sub-menu li.menu-item > a > .menu-thumbnail {
   flex: 1 0 20%;
   margin-right: 10px;
}

ul.sub-menu li.menu-item > a > span {
    flex: 1 0 80%;
}

ul.sub-menu .menu-thumbnail > img {
    width: 100% !important;
}

Which will have this effect - https://share.getcloudapp.com/GGu4YY4N

Thanks for this...
OK - here is a link to the page:
https://wordpress-681983-2245781.cloudwaysapps.com/

Under Services you will see the Mega Menu as per your CSS.

I have added the snippet as this:

add_filter('wp_nav_menu_objects', 'ad_filter_menu', 10, 2);

function ad_filter_menu($sorted_menu_objects, $args) {

    // check for the right menu to filter
    // here we check for the menu with name 'Posts Menu'
    // given that you call it in you theme with:
    //   wp_nav_menu( array( 'menu' => 'Posts Menu' ) );
    // if you call the menu using theme_location, eg:
    //   wp_nav_menu( array( 'theme_location' => 'top_manu' ) );
    // check for:
    //   if ($args->theme_location != 'top_menu')
    if ($args->menu != 'Posts Menu')
        return $sorted_menu_objects;

    // edit the menu objects
    foreach ($sorted_menu_objects as $menu_object) {
        // searching for menu items linking to posts or pages
        // can add as many post types to the array
        if ( in_array($menu_object->object, array('post', 'page', 'any_post_type')) ) {
            // set the title to the post_thumbnail if available
            // thumbnail size is the second parameter of get_the_post_thumbnail()
			$thumbnail = '<div class="menu-thumbnail">'.get_the_post_thumbnail($menu_object->object_id, 'thumbnail').'</div>';
			if (has_post_thumbnail($menu_object->object_id)) {
				$menu_object->title = $thumbnail.'<span class="menu-item-label">'.$menu_object->title.'</span>';
			}
            
        }
	}	

    return $sorted_menu_objects;
}

Is it targeting the correct menu name? Does not seem to be pulling any images through?

And also - is there a way to hide the Child Menu Titles?
Or some work around that I can target them to make them look invisible!
Thanks again.

Hey Guys - any chance of an update on this please?

We can modify the PHP snippet to this so it only applies to the primary menu.

add_filter('wp_nav_menu_objects', 'ad_filter_menu', 10, 2);

function ad_filter_menu($sorted_menu_objects, $args) {

    // check for the right menu to filter
    // here we check for the menu with name 'Posts Menu'
    // given that you call it in you theme with:
    //   wp_nav_menu( array( 'menu' => 'Posts Menu' ) );
    // if you call the menu using theme_location, eg:
    //   wp_nav_menu( array( 'theme_location' => 'top_manu' ) );
    // check for:
    //   if ($args->theme_location != 'top_menu')
    if ($args->theme_location === 'primary'){
		// edit the menu objects
		foreach ($sorted_menu_objects as $menu_object) {
			// searching for menu items linking to posts or pages
			// can add as many post types to the array
			if ( in_array($menu_object->object, array('post', 'page', 'any_post_type')) ) {
				// set the title to the post_thumbnail if available
				// thumbnail size is the second parameter of get_the_post_thumbnail()
				$thumbnail = '<div class="menu-thumbnail">'.get_the_post_thumbnail($menu_object->object_id, 'thumbnail').'</div>';
				if (has_post_thumbnail($menu_object->object_id)) {
					$menu_object->title = $thumbnail.'<span class="menu-item-label">'.$menu_object->title.'</span>';
				}

			}
		}
		
	}
	return $sorted_menu_objects;

}

We then add this CSS if you want the titles hidden on submenu items.

ul.sub-menu .menu-item-label { display: none; }

Hey Elvin,

Thank you for your support on this.
I am nearly complete with this menu and think it is looking good.
The last piece of css hides all the titles.

I want to only hide the "CHILDREN" ones...
So - TEST 1, TEST 2 and TEST3

Is that possible?
I cannot figure the css for it.

Hi John,

Do you only want to hide the menu items on desktop?

If so, try this CSS:

.main-navigation .main-nav > ul > li#menu-item-4857 > ul > li >a {
    display: none !important;
}

Hi Ying,

Great - that does hide them on Desktop - thank you.
What can be done for the mobile versions?

You can try something like this:

#mobile-header li.menu-item.menu-item-4857 li ul.sub-menu,
#mobile-header li.menu-item.menu-item-4857 li  span.dropdown-menu-toggle{ 
display:none; 
}

But I suggest applying a unique class on the menu item on mobile so it works for the class regardless if you change menu item id.

You can apply class to menu items through Appearance > Menus. https://share.getcloudapp.com/ApuE7EBq

You can try adding hide-submenu-on-mobile class to the menu item you wish to hide submenu on and then use this CSS:

#mobile-header li.menu-item.hide-submenu-on-mobile li ul.sub-menu,
#mobile-header li.menu-item.hide-submenu-on-mobile li  span.dropdown-menu-toggle{ 
display:none; 
}

Thank you for the detailed reply.
I tried the second method - added the class to the three items TEST 1 TEST 2 TEST 3
Added the css.
Doesn't seem to make any difference.
Any thoughts?

You'll have to add it on the parent menu item of Test 1, 2 and 3. :)

Hmmmm - You mean in this case SERVICES?
This contains the mega-menu mega-menu-col-3 class.
Am I thinking about this the wrong way? (Probabaly!)

I did just add the other css:

#mobile-header li.menu-item.menu-item-4857 li ul.sub-menu,
#mobile-header li.menu-item.menu-item-4857 li  span.dropdown-menu-toggle{ 
display:none; 
}

But this keeps the TEST1,2 and 3 and removes the pages I want to keep.
Am I getting this worng?