Elegant Themes

Mega Menus allow users to see more links all at once without the hassle of scrolling, hovering, and remembering the contents of your menu.

Mega Menus can be thought of as drop-down menus within drop-down menus. Unlike a regular dropdown menu that displays a submenu when hovering over the main parent links in your navigation bar, a mega menu provides you with the ability to have additional parent links and submenus within the dropdown menu.

This allows for a more organized and comprehensive navigation experience for the user.

How To Add A Mega Menu To Your Navigation Bar

Log in to your WordPress dashboard and go to Appearances → Menus

Create a menu with four parent links, each with their submenu links. In the example below, I'm adding three submenu items under each of the four parent menu links.

Create an additional link to serve as your Megamenu link. For the example below, I'm calling this link Features. Then, drag the four parent menu links (each with submenu links) under the Features link.

To create a Megamenu, you need to add a special CSS class called <code>mega-menu</code> to the main top-tier link. To do this, click on the Screen Options link at the top of your page and make sure the CSS class option is checked. This will allow you to add the necessary class to your link and create a Megamenu with ease.

Add the CSS class <code>mega-menu</code> to the Features link you created. Click the arrow on the right of the Features menu item to toggle the additional configuration options. Find the CSS Classes text box and enter the <code>mega-menu</code> class.

1. Log in to your WordPress dashboard and go to Appearances → Menus
 
 WordPress Menus page
 
2. Create a menu with four parent links, each with their submenu links. In the example below, I'm adding three submenu items under each of the four parent menu links.
 
 Organize the menu items
 
3. Create an additional link to serve as your Megamenu link. For the example below, I'm calling this link Features. Then, drag the four parent menu links (each with submenu links) under the Features link.
 
 Build the menu strucutre
 
4. To create a Megamenu, you need to add a special CSS class called <code>mega-menu</code> to the main top-tier link. To do this, click on the Screen Options link at the top of your page and make sure the CSS class option is checked. This will allow you to add the necessary class to your link and create a Megamenu with ease.
 
 Enable the CSS class
 
5. Add the CSS class <code>mega-menu</code> to the Features link you created. Click the arrow on the right of the Features menu item to toggle the additional configuration options. Find the CSS Classes text box and enter the <code>mega-menu</code> class.
 
 Adding the CSS class to the menu item

When you reload your page, you can see that all those previous menus have been placed in the one giant menu under this link, the Mega Menu.