The plugin developer kindly provides this tutorial. You can access the full plugin's documentation on this URL: https://www.maxmegamenu.com/documentation/getting-started/.
Please note that the screenshots are for explanatory purposes. Content look may change.
Installation
After installation, you will see the following changes made to your WordPress Dashboard:
Dashboard > Appearance > Menus (menu management)
There will be a Max Mega Menu Settings box on the left, and a blue Mega Menu link will appear when hovering over each menu item.
Dashboard > Mega Menu (plugin options)
This is a new page where you will be able to create menu themes and manage the plugin options.
Enabling Max Mega Menu for a Theme Location
Go to Appearance > Menus.
If you don't already have a Menu set up then you'll need to create a new one. Click the 'create a new menu' link and ensure your new menu is assigned to a Theme Location at the bottom of the page.
You will see the settings for Mega Menu on the left-hand side (under "Max Mega Menu Settings").
Check the "Enable" checkbox and click 'Save'.
Your menu will now be converted into a Mega Menu for the relevant Theme Location.
Before
After
Now we can start implementing the Max Mega Menu functionality. This includes adding widgets to our menu, and menu icons and applying custom styling to the menu.
Mega Menus
A Mega Menu is the name we give to a large panel of the content displayed below a menu item when the user clicks or hovers over the menu item. Mega Menus can contain sub-menu items and Widgets.
Each item in your menu will display a blue 'Mega Menu' button when hovered over. Clicking this button will launch a panel containing all Mega Menu settings for this menu item.
Displaying Menu Items in a Mega Menu
By default, child menu items will be displayed in your site's dropdown (Flyout) menu.
To convert a flyout menu to a Mega Menu, switch the Sub menu display mode from Flyout Menu to Mega Menu.
If present, each child menu item (Level 2, Level 2a, Level 2b) will be displayed in the Mega Menu editor.
Each child/second level menu item can be expanded or contracted using the left and right arrows to take up more or less the width of the mega menu.
Before (Flyout Menu)
After (Mega Menu)
Displaying Widgets in a Mega Menu
Select a widget to add to a Mega Menu using the selector at the top right of the Mega Menu editor. The widget selector will list all of the widgets installed on your WordPress site.
To edit a widget, click the down arrow on the right:
Use the left and right arrows on the widget to expand or contact the widget.
Changing the number of columns
Mega Menus can be adjusted to show between 1 and 8 columns of content. Sub Menus and Widgets can span multiple columns. Each Mega Menu can be configured to use a different number of columns.
Use the drop-down selector at the top right of the Mega Menu settings to change the number of columns:
Flyout Menus
Hierarchical menu items will be displayed in a flyout menu by default. No special configuration is needed. Simply set up your menu items in a hierarchy in the menu editor in WordPress.
Flyout menus show one level of menu items at a time, expanding as the user hovers or clicks each item.
Flyout Menu Alignment
By default, the flyout menu will be aligned to the left-hand edge of the parent item. To align the flyout menu to the right-hand edge of the parent menu item (and make the sub menu’s flyout to the right), change the “Sub Menu Align” setting in the Mega Menu settings for the parent item.
Menu Icons
Menu Item Icon
Max Mega Menu allows you to set an icon for each menu item in your menu.
To set an icon, go to Appearance > Menus. Hover over the menu item you wish to add an icon to and click the blue ‘Mega Menu’ button to open the Mega Menu settings panel. Select the ‘Menu Icon’ tab on the left.
All available dashicons are selectable.
Menu Item Options
Menu Item Settings
Hide Text
To hide the menu item text, check the ‘Hide Text’ option and save. This is useful for displaying social icons in your menu, where only the icon is needed.
Hide Arrow
To hide the menu item arrow indicator check the ‘Hide Arrow’ option and save.
Aligning Menu Items
Menu items are aligned to the left of the menu by default. To align a menu item to the right (e.g. for social icons), open the Mega Menu settings panel for the item in question and click the ‘General Settings’ tab on the left, then set ‘Menu Item Align’ to ‘Right’ and save.
Note: Right-aligned menu items will appear in reverse order on the right-hand side of the menu. To cancel out this effect, reverse the order of the items in your menu.
Aligning Flyout Menus
By default, Flyout Menus are aligned to the left edge of the parent menu item and expand outwards to the right. You can reverse this (align to the right edge and expand to the left) by changing the ‘Sub Menu Align’ option to ‘Right’.
Aligning Mega Menus
By default Mega Menus are 100% wide, so aligning them to the left or right will have no visible effect.
If you have set the mega menu width (in the theme editor) to a fixed pixel value, you can align it to the right by setting the ‘Sub Menu Align’ option to ‘Right’.
General Settings
CSS Output
Max Mega Menu automatically generates the required CSS to display your menu(s). The CSS Output option lets you choose how this CSS is added to your page.
Enqueue dynamically via admin-ajax.php (default)
When this option is chosen, the CSS will be output in your page HTML like so:
1 | <link rel='stylesheet' id='megamenu-css' href='https://www.maxmegamenu.com/wp-admin/admin-ajax.php?action=megamenu_css&ver=1.7' type='text/css' media='all' /> |
The CSS is retrieved from the cache dynamically (creating an extra call to WordPress) and, therefore, can slow down page load times on specific WordPress installations.
Save to filesystem (recommended)
When this option is chosen, the CSS will be automatically saved to your uploads directory.
1 | <link rel='stylesheet' id='megamenu-css' href='https://www.maxmegamenu.com/wp-content/uploads/maxmegamenu/style.css?ver=f399f6' type='text/css' media='all' /> |
This option was introduced in Max Mega Menu v1.7.
Suppose the CSS cannot be saved automatically (due to server permissions), or we find that the CSS file has been manually edited. In that case, Max Mega Menu will fall back to using the ‘Enqueue via admin-ajax option.
This method of CSS Output is much faster than the ‘Enqueue via admin-ajax option and will likely be the default CSS Output method in v1.8.
Output in <head>
When this option is chosen, the CSS will be minified and placed in an inline style block:
1 | <style type="text/css">#mega-menu-wrap-primary_navigation.......</style> |
This option is fast but will result in some rather ugly source code on your page.
Don’t output CSS
This option will stop Max Mega Menu from outputting any CSS on your page. You will need to manually enqueue your own CSS for the menu to function correctly.
Click Event Behaviour
If you have the menu event sent to ‘Click’, or you are viewing your site on a touch screen device (where the event will automatically be switched to ‘Click’), then this setting defines what should happen on the second click of a menu item which has a sub-menu.
By default, the first click (or tap) on a menu item will open the submenu, and the second click will close the submenu. This makes it impossible to follow the link itself. If you want your users to be able to follow the link, set this option to “First click opens sub-menu, the second click follows the link”.
Menu Styling
Under Mega Menu > Menu Themes you’ll find a theme editor which allows you to edit the appearance of your menus. Max Mega Menu has one built-in theme (Default), but you can create your themes.
The Theme Editor will let you modify all aspects of the Menu styling, including your menus' font, colour and size (height).
To create a new theme, go to Mega Menu > Menu Themes and click the ‘Create a new theme’ link (or scroll to the bottom of the page and click ‘Duplicate Theme’). Make any adjustments and click the save button.
To apply your new theme to a menu, you must go back to Appearance > Menus and select your new theme from the ‘Theme’ dropdown in the Mega Menu Settings.
Widget
Max Mega Menu comes with a built-in widget which allows you to display a single menu location within a widget area. Depending on your theme, you might have widget areas in the header, footer and sidebar. Using the following method, we can add a Mega Menu to any of these areas.
Step 1: Register a new menu location.
Most themes register a set number of menu locations (e.g. “Primary Menu”). If you already have a menu assigned to “Primary Menu”, then it’s unlikely you’ll want to display the same menu in a sidebar.
First, we’ll need to create a new menu location for use within the widget.
Under Mega Menu > General Settings, click the “Add another menu location” link and rename the location to something suitable.
We now have a new menu location which we can use within the Max Mega Menu widget.
Step 2: Assign a menu to the new location
Under Appearance > Menus, create a new menu and assign it to the new menu location.
Step 3: Add the Max Mega Menu widget to a sidebar
Under Appearance > Widgets, drag the Max Mega Menu widget to a sidebar and select the new menu location.
The menu will now be displayed in your sidebar. You can repeat the same steps to create and display multiple Mega Menus on your site.