[Resolved] Adding HTML Inside Mega Menu

[Joel]

Hello,

I’m planning to build a mega menu on our new site following this documentation – https://docs.generatepress.com/article/building-simple-mega-menu/

I would like to include images in the mega menu that are clickable links. I understand that the above documentation is intended for simple mega menus and the general recommendation is to install a separate plugin for anything like this. However, these can be quite bloated so I’m hoping to find a GP solution!

My initial plan was to use a menu shortcode plugin which seems to work but it’s an additional plugin. I then saw the option to add HTML inside a Mobile Header using Elements/Hooks which got me wondering whether there might be an elements/hooks based solution to this? Or even better a GenerateBlocks based solution?

Incidentally, does the code in the above mega menu documentation need to be tweaked for Flexbox?

Thanks!

[Elvin]

Hi,

I would like to include images in the mega menu that are clickable links. I understand that the above documentation is intended for simple mega menus and the general recommendation is to install a separate plugin for anything like this. However, these can be quite bloated so I’m hoping to find a GP solution!

You can place tag within the menu item’s Label field when you’re setting it on Appearance > Menus much like how you place icons as shown here. https://docs.generatepress.com/article/adding-icons-to-menu-items/

The image goes inside li.menu-item > a which you should be able to style with custom CSS.

My initial plan was to use a menu shortcode plugin which seems to work but it’s an additional plugin. I then saw the option to add HTML inside a Mobile Header using Elements/Hooks which got me wondering whether there might be an elements/hooks based solution to this? Or even better a GenerateBlocks based solution?

If you must use a shortcode from a plugin to replace the primary menu, you can do a do_shortcode([yourshortcode]); using generate_inside_navigation and remove the current primary menu you’re using.

If you want to do a GenerateBlocks based solution, you’ll have to use Block Element:

Block element lets you create a layout with Gutenberg editor which means you can use GenerateBlocks. You can then hook this Block Element to generate_inside_navigation. And again, you’ll have to remove primary menu if you don’t want it to display along with the Block Element.

Incidentally, does the code in the above mega menu documentation need to be tweaked for Flexbox?

It works as is for flexbox.:)

[Joel]

Thanks for getting back to me, that’s given me something to work with.

I should have been a bit clearer about the image, it would be in a submenu, a bit like this – https://i.ytimg.com/vi/eNUdcaXWRVE/maxresdefault.jpg

Would these techniques still work for something like this?

Thanks again.

[Elvin]

It seems like the image is the child menu of “Our Company”.

And this “image” child menu only has an <img> tag for its label so it should work. Its just a matter of proper placing of child menus.

[Joel]

Great stuff, thanks again

[Elvin]

More tip: You can assign custom classes to that “image” if incase you need to custom style it w/ CSS.

No problem. 🙂

[Author]

Posts