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.
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.
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.
The front end mega menu should now look something like this.
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.
Adjusting the Mega Menu container width
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.
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.
Now the selected module will also show up on the Mega Menu as in the below example.
