This tutorial is kindly provided by the plugin developer. 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



The basic setup for Max Mega Menu has been completed.

Now we can start implementing the Max Mega Menu functionality. This includes adding widgets to our menu, menu icons and applying custom styling to the menu.


Mega Menus


A Mega Menu is the name we give to a large panel of content which is 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 of the Mega Menu settings for this menu item.



Displaying Menu Items in a Mega Menu


By default, child menu items will be displayed in a dropdown (Flyout) menu on your site.

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 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 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 right edge and expand to 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, however, 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 certain 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.

If the CSS cannot be saved automatically (due to server permissions), or we find that the CSS file has been manually edited, 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 made 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 sub menu, and the second click will close the sub menu. 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, 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 own themes.

The Theme Editor will let you modify all aspects of the Menu styling, including the font, color and size (height) of your menu’s.

To create a new theme, go to Mega Menu > Menu Themes and click the ‘Create a new theme’ link (or alternatively, 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 will need to 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 set up in the header, footer and sidebar areas. Using the following method we can add a Mega Menu to any of these areas.


Step 1: Registering a new menu location.

Most themes register a set number of menu locations (eg “Primary Menu”). If you already have a menu assigned to “Primary Menu” then it’s unlikely you’ll want to display exactly the same menu in a sidebar.

First we’ll need to create a new menu location specifically 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.