Please make sure you have Menu Image installed and activated before creating any custom widget area. If you haven’t already done so, you still can install this plugin before proceeding to the following steps.
Create a Simple Mega Menu
You can view a demo of that menu style on the “Community menu item” here.
Your parent menu item just needs to have the mega-menu
as CSS class.
Don’t forget to activate CSS class for menu items in the screen options panel.
Adding an Off Center Image to a Mega Menu
You can view a demo of that menu style on the “Community menu item” here.
Your parent menu item just needs to have the mega-menu off-center-menu
as CSS class and a child blank menu item (with your image) needs to have the the off-center-image
CSS class.
First to add images to your menu you must install and activate the Image Menu plugin.
Don’t forget to activate CSS class and images for menu items in the Screen Options panel.
Creating an Image Grid Mega Menu
You can view a demo of that menu style on the “Events menu item” here.
Your parent menu item just needs to have the mega-menu mega-menu–image-grid mega-menu–tiled-grid
as CSS class and child menu items needs to have an image.
Don’t forget to activate CSS class, images and description for menu items in the Screen Options panel.
You can go further with the sizes of every column.
Controlling Width
col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12
Please note that the sum of all columns must be equal to 12 per line (e.g col-6 + col-2 + col-4).
Controlling Height
small
medium
big