[Resolved] Add Imageto Mega Menu

[Ying]

Hi John,

If you want to hide them both on mobile and desktop, why just leave the label field empty instead of TEST1/TEST2/TEST3?

Let me know 🙂

[John]

Hi Ying,

If you leave the label field empty from the custom links, then it breaks the code for some reason and causes the mega menu to break.
Please look the the site now:
https://wordpress-681983-2245781.cloudwaysapps.com/

I have removed the TEST 1 label and everything goes wonky!
Any ideas on how to by pass this?
CHeers!
John

[Ying]

Hum… Seems the sub menu items of test 1 becomes the main menu items now.

Can you make sure the empty Test 1 menu item is still there and its sub menu items are still below it as its children?

Let me know 🙂

[John]

So it seems the empty TEST 1 disappears when you remove the label field.
and the sub menu items that were under it, get dropped to the bottom of the menu

[John]

I will add it back in and hopefully you can help with the MOBILE VERSION

[Elvin]

I may be misunderstanding what you want to achieve.

Any particular reason why menu items Test 1, Test 2 and Test 3 are added when you want them removed/hidden?

If there’s no particular reason for having them, I think you can just set the menu hierarchy to:

> Services
>> Yoga Therapy for Parkinson’s
>> Movement for Grief and Loss

Instead of having an child submenu. Can you explain a bit more about the preferred behavior?

Note: You can have a different menu for mobile header. Check this – https://docs.generatepress.com/article/using-a-different-menu-on-mobile/

[John]

I have 6 elements I want to display in a mega menu under services.
SO I followed your documentation.
It implies that the structure is PARENT < CHILD < GRANDCHILD
How else can I get 6 elements to show?

[John]

If I remove the TEST 1 (Child elements), then only the Grandchild services remain

[John]

I know I can use a different menu for mobile, but that means updating two menus for all changes, which can be easily forgotten about and cause issues further down the line

[John]

And having one of the services act as a child, with 2 services underneath as Grandchildren – causes issues with image size and slightly off formatting.
Any ideas on how to achieve this?
Thanks again!!!

[Elvin]

I have 6 elements I want to display in a mega menu under services.
SO I followed your documentation.
It implies that the structure is PARENT < CHILD < GRANDCHILD
How else can I get 6 elements to show?

The documentation only serves as example. It can be changed depending on how the hierarchy has to be implemented. 🙂

If the goal is to simply display 6 menu items under “Services” then there shouldn’t be any need for CHILD > Grandchild

You can just go directly with the 6 items as the direct child menu items of “Service” like this –

> Services
>> 1
>> 2
>> 3
>> 4
>> 5
>> 6

– as there’s nothing that limits how many child can a parent menu item have.

If I remove the TEST 1 (Child elements), then only the Grandchild services remain

I’m not sure what this implies. If I understood it right, I believe this is what you’re trying to do? (To display only the 6 grandchild services items, and HIDE test 1-3?)

If that’s the case then you might as well remove it as it’s adding unnecessary menu item that may actually be detrimental to site performance.

[John]

Oh LOLS
I feel so stupid…I was totally overcomplicating it.

That worked (obviously – says you!)
Sorry for wasting your time and thanks again.

[Elvin]

My bad as well. I had a hunch this was the case but I was still entertaining the idea that you may have some sort of functionality that is viewport specific for keeping the test 1-3 buttons.

It only got clear to me when you asked about removing it on mobile as well. lol.

No problem. Glad you got it sorted. 😀

[John]

EDIT WILL START A NEW TOPIC ON THIS

Hello again…

I have found another issue with this MENU.
If I add a featured image to a different page on the header, then it is showing above the menu.
For example, I have added a featured image to the BLOG page:
https://wordpress-681983-2245781.cloudwaysapps.com/blog/

It is displaying it above the BLOG MENU Item.
How can I limit the images to be only those that are in Mega Menu dropdowns?
Or is there a way to use an image other than the featured image?

Many thanks!
John

[Elvin]

You can try this modification on the snippet:

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')) && $menu_object->menu_item_parent != 0 ) {
				// 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;

}

[Author]

Posts