Setting up the Mega Menu
Setting up a basic mega menu is pretty easy to do. There are just four requirements to make it work:
- Your menu module has to be placed in the menu position.
- You have to assign the parent menu item some children (make sure you've nested them properly)
- In module manager, the show sub-menu items option under basic options needs to be set to yes
- You have to give the dropdown menu at least two columns, or else it will just default to a regular dropdown menu.
To give the dropdown menu multiple columns, you'll need to add a page class to the level1 parent menu item. The following screen shot shows the page class I added to one of the live demo mega menu samples. You can change column width and number of columns as desired.
Spicing up your mega menu
You can make your mega menu a little fancier by adding some icons and subtitles to the level 2 items:
Those nice icons I used are free for personal or commercial use and can be downloaded here. They were designed by Andrew Zhebrakov. Thanks Andrew!
To insert the icons, just edit the menu item in menu manager and give it a "link image":
Then to add the subtitle, place two pipe symbols between the title and subtitle like this:
...the text you enter after the two pipe symbols ( || ) will be the subtitle.