Super Simple Themes
Free WordPress Themes & Resources

How to add a drop down or mega menu to WordPress

To keep our themes as lightweight as possible, drop down and mega menu functionality isn’t included by default. If this is a feature you require in one of our themes or perhaps a theme from another developer this tutorial will detail the process involved to add them.

The plugin we’ll be using to add our enhanced menu is “Max Mega Menu” by Tom Hemsley. There are a number of other plugins available for creating drop down menus but all themes developed by Super Simple Themes have been tested with this plugin so it’s what we use and recommended.

Max Mega Menu Plugin

To get started go to “Plugins” -> “Add new” in the WordPress dashboard and search for “Max Mega Menu”. You should see it in the search results, then simply click “Install” and once the plugin has finished installing click the “Activate” button. Now the plugin has been installed and activated it’s time to create our menu.

Create menu and enable Max Mega Menu

Once installed you need to enable Max Mega Menu on your menu of choice. If you haven’t already created a menu goto “Appearance” -> “Menus” and create a menu. When you visit the “Menus” page you’ll now see an expandable settings box in the left column. Select the “Enable” checkbox, hit save and also save the menu. Max Mega Menu functionality will now be applied to your selected menu.

Standard drop down menu

By default Max Mega Menu will create a simple drop down menu once enabled providing you have the right menu structure.

A simple single level drop down menu setup would look like the following:

All items under the “Shop” menu item (sub items) will only appear when the “Shop” menu item is hovered over. To create a sub item you simply drag the menu item underneath the menu item you would like to be the parent menu item. When the example menu structure created above is viewed in the browser it looks like the following:

Note: no default settings have been modified at this stage, we’ll get to that later in the tutorial.

Mega drop down menu

A mega menu is a more advanced version of a drop down menu. Typically they include multiple columns allowing a user to quickly navigate to a deep sections of a website. They can also include images and other functionality to make navigating large complex sites easier or for attracting clicks to key pages within your website. For this tutorial we’ll be adding some additional columns and images to the menu structure we’ve already created.

To convert the flyout drop down menu to mega menu click the “Mega Menu” button on the menu editor page (“Appearance” -> “Menus”). This will open a popup window that allows you to create your mega menu layout. For our example we’ll be creating a 3 column mega menu with some images that link to featured sections.

  1. Select the “Mega Menu – Grid Layout” dropdown.
  2. Add the additional columns using the “+ Column” button.
  3. Adjust the width of the columns by click the blue arrows in the column header.
  4. Add image widgets to the columns using the “Select a Widget to add to the panel” dropdown.
  5. Add images, links, and a title to the image widgets by clicking the wrench icon.

After completing the above steps our grid layout looks like the following:

All changes made will auto save so you can simply adjust these setting and refresh your website in another tab to see the updates. When viewed in the browser here is what our new mega menu looks like:

Customising the Max Mega Menu appearance

Up until this point in the tutorial we’ve been using the default appearance settings. These settings can be further customised to match your theme settings by clicking the “Mega Menu” menu in the WordPress dashboard. Here you’ll find a number of color, font, size and padding settings that can be edited as required.

Our “Super Simple Shop” example menu would look better with a transparent background and a darker mega menu background color. To acheive this we simply need to alter the Menu Background, Panel Background and Heading Font settings as follows:

Once the changes have been made hit save and the updates can be viewed in the browser. Here’s what our completed mega menu looks like:

As you can see with a little setup the Max Mega Menu plugin makes it easy to create a stylish and engaging menu to help users navigate your site.