How to create a mega menu

Mega menu is essentially a WordPress menu with a mega item. Mega items are menu items that feature multiple columns of links. You can see it in action by visiting one of our demos, for instance Directory. When the page opens hover over “Places” or “Events” within the main menu.

Installing the plugin?

For most Templatic themes that support mega menus (all themes released January 2013) the functionality is enabled by installing a free Templatic plugin. To install it follow these instructions:

  1. Download the plugin by clicking here.
  2. Go to wp-admin ⇨ Plugins ⇨ Add New ⇨ Upload.
  3. Hit Browse… to find the plugin you just downloaded. Click “Install Now” to initiate installation
  4. Activate the plugin once it’s finished installing.

Once installed the plugin will add a new “jQuery Mega Menu” widget, but more on that later.

Creating a mega menu

As mentioned earlier, mega menus are in their essence regular WordPress menus. To create one head over to wp-admin ⇨ Appearance ⇨ Menus. You can use an existing menu or create a new one, your call.

In the above image “Item 2” is a mega item. Heading Title 1, 2 and 3 are the columns. Items within menus are organized using simple drag n drop. In this tutorial I won’t go into details on how that is achieved. For more info on how it works check out this video.

Setting up and activating the menu

After you create the menu, head over to wp-admin ⇨ Appearance ⇨ Widgets in order to activate it. For most themes you need to place the jQuery Mega Menu widget inside the jQuery Mega Menu / Mega Menu Navigation area?. Once you place the widget edit just the “Number of Items Per Row” option. Set it to a number higher than 1. With that option you control the number of columns per row. In the above example I added 3 headings/columns to the mega item. So if I set “Number of Items Per Row” to three this is how it will look (in Carty theme).

Do not assign the menu to one of the theme locations inside Appearance -> Menus. This will conflict with the Mega Menu widget.

mega menu

 

Any Queries? Contact us and we’ll help you out.

Creating a Custom menu

Please watch the following video in 720p or Full HD quality in order to see everything that is going on

FAQ: Why are my menu items disappearing?

If items have started disappearing from the menu, you are most likely experiencing memory issues mentioned in this topic. To resolve the problem add the following line of code to your php.ini file

 max_input_vars=2000

If you don’t have access to that file try getting in touch with your hosting provider and asking them to do this for you.