Creating Mega Menus

Heads up! Make sure Menu image is installed first!
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. Here is the accepted CSS classes :

  1. Control 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). The sum of the columns must be equal to 12 per line (e.g col-6 + col-2 + col-4)
  2. Control Height (small, medium, big).