Supported in HTML, Joomla + VirtueMart, WordPress + Woocommerce, Magento and PrestaShop.
Available for 3 levels menu.
Summary
MegaMenu is a Type of the Horizontal menu. This type groups menu subitems and displays them in columns. MegaMenu uses bootstrap grid for columns.
When you switch the type of the Horizontal menu the new options for MegaMenu appear:
The MegaMenu mode is only activated for 3 levels menu items:
Item (Electronics) - 1st level
- SubItem (Smartphones/Tablets) - 2nd Level
-- SubSubItem (Smartphone x/Tablet x) - 3rd Level
Structure
The general structure of the MegaMenu looks as follows:
Columns
Here you can configure columns settings for different responsive modes and style Columns and Column Items. The MegaMenu Columns are located inside the Submenu wrapper.
Popup Width - the option to control the width of the Megamenu popup:
- Sheet Width - the MegaMenu popup will be stretched to the width of the sheet (equivalent of the Boxed Length)
- Custom Width - the option to specify custom width of the MegaMenu popup in px.
The "Number of Columns" settings are similar to the settings of the Columns or Blog controls.
The empty value means that the number of MegaMenu columns will be equal to the number of Categories (2nd level items).
Please note that Themler uses bootstrap grid. It means that inheritance of the number of columns goes from Phone to Desktop modes.
For example:
In this case the Tablet, Laptop and Desktop modes will show megaMenu items in 2 columns.
The number of columns can be overridden for individual items under the menu settings in CMS (see below).
Item and Hover - settings for Columns Item (a cell of category).
Columns - settings for whole Columns.These Settings override settings specified under the Submenu.
Category
Here you can style the 2nd Level items (Smartphones & Tablets in the example above).
Category does not inherit the style of the Multi-Level menu subitems.
Item
Items - are 3rd level subitems ((Smartphone x/Tablet x)).
Item does not inherit the style of the Multi-Level menu subitems.
Subitem
All other items (starting with 4th Level). MegaMenu is not supported for 4+ levels. These Levels will be displayed as regular Horizontal Menu popups.
Subitem inherits the style of the Multi-Level menu subitems.
Responsive
If mobile menu is enabled MegaMenu switches to simple menu in the appropriate responsive mode.
In this example Megamenu switches to "Multi-Level" menu type in the Phone mode.
MegaMenu configuration in CMS
The following options can be overridden under the CMS menu settings:
enable/disable MegaMenu for specific items. Please note that Megamenu should be enabled/disabled for 1st Level item only. The default value is "enable". if you need to disable Megamenu for the selected item please switch Allow MegaMenu to "disable".
MegaMenu width. The empty/default option means that the width settings defined in the theme will be used.
Number of Columns. You can override the number of columns specified in Themler for individual items. The empty value means that the the number of columns defined in Themler will be used.
WP
The MegaMenu settings are available under the WP Appearance >> Menu:
Joomla
The MegaMenu settings are available under the Joomla Extensions >> Template Manager >> theme options >> Menus tab:
PS
The MegaMenu mode can be enabled for Product and CMS pages Categories.
The settings are available under the Modules >> Modules >> search for "Top horizontal menu modified" module >> Configure:
- add appropriate category under MENU TOP LINK section
- save changes
- scroll down and find the options under the MEGAMENU SETTINGS section
Magento
The MegaMenu settings are available under the Billion themes >> Settings >> Menu tab:
HTML
The MegaMenu settings are available under the Page Properties:
