Need a custom website? Call us at 1-888-760-0878

Elegance Mega Menu

Elegance has a built-in mega menu that can be enabled in the main menu. It can be used after first saving a top level menu item or in already existing top level menu items.

First you need to create a top level menu item and save it before the Mega Menu options will appear.

  • Dropdown Position - allows you choose the alignment (center/left/right) position of the dropdown menu.
  • Show Menu Title - allows you to hide menu item title, this may be useful when you want to show only an icon instead of the menu title.
  • Menu Icon - the use of icons beside menu items is a fantastic alternative that favors a quick visual option identification; and even the use of icons without text to accompany is viable. You can use font icons based on Font Awesome.
  • Custom CSS Class - allows you to add Custom CSS Class(es) to this menu item.

megamenu toplevel


Three Column Submenus Example

Building a two or three columns Sub menu is easy, it all starts from the Menu Manager, where you have to structure your main menu first and add all the sub menu items. Here is example structure to get 3 columns of menu items.

 megamenu structure

 Once you have your basic menu structure created, open up your top level menu item (the menu item named "Mega Menu" in our above example) and click on the tab named "Elegance Megamenu Options" and you should see your menu columns as in the example below depending on if you have a two or three column menu layout selected.

megamenu columns

 The front end mega menu should now look something like this.

megamenu frontend1

Please note that in Elegance MegaMenu Options if you change your mega menu and do not see the changes on the front end, you'll have to refresh the menu structure to get the changes to take place - like in following example.

megamenu refresh

Adjusting the Mega Menu container width

megamenu containerwidth

Mega Menu Layout Options

The Elegance Mega Menu has pre-built layout options. You can click the Manage Layout button to select how many columns and rows you would like your Mega Menu to have in it.

megamenu layoutoptions

Adding module into the Mega Menu

Once Menu item is saved you can check this tab again. From here, you can select a module and drag and drop a module from the module list into this menu item as a submenu.

megamenu moduleinsert

Now the selected module will also show up on the Mega Menu as in the below example.

megamenu modulesincolumns




Sign up for our newsletter updates. No Spam! We Promise!

Back To Top