WP Mega Menu Pro – Responsive Mega Menu Plugin for WordPress – Documentation

Documentation of WP Mega Menu Pro Plugin

A) Installing Instructions

  1. Unzip wp-mega-menu-pro.zip
  2. Upload all the files to the /wp-content/plugins/wp-mega-menu-pro
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. For setup default plugin’s settings, click on WP Mega Menu Pro option menu in WordPress left admin menu.
  5. To display the mega menu or fly-out in the front-end, go to back-end wordpress menu page, please create menu location if not any exist. Simply add menu from left metabox section and assign those menu to menu location. Then, on same left section, you can see the metabox with title “Select WP Mega Menu Pro Settings” where you can enable mega menu for specific menu location. Similarly, you can also use generated shortcode from shortcode tab in WP Mega Menu Pro left admin menu for any page, post, widget or template pages.

Once the plugin is installed and activated you will find a menu named “WP Mega Menu Pro” in the left menu bar of the admin menu.Once you click on that menu , you will go to the plugin’s default settings page such as general settings, mobile settings, image settings and similarly, on second sub menu of this plugin you can see Theme Settings where you can create new custom templates ,assign it to specific menu location from back-end admin menu page and you can setup your own custom theme templates with more than 100+ customization options and more than 50+ google fonts available. Basically there are seven main settings panels as general settings, image settings, mobile settings ,import and export settings , sticky menu settings, Enable Custom CSS Settings ,Icon Settings that will help you to setup the plugin default setup which is individually described below.


B) WP Mega Menu Pro Settings

1) General Settings

In this tab, you can set the default values such as event behavior while clicking event is selected from menu location for specific theme location, menu label animation type with duration, delay, iteration counter, woocommerce total cart display common layout.

On event behavior, there are two options i.e Open Submenu on first click and close on second click or Open submenu on first click and follow link on second click.Another default settings options is to set default annimation for menu label although you can set different animation to different menu label from admin menu popup form settings.
In woocommerce settings, this is the common settings for woocommerce total cart display which can be show as menu replacement from admin menu pag

WP Mega Menu Pro General settings

2) Mobile Settings

WP Mega Menu Pro Mobile settings

In this settings, you can enable megamenu on mobile version, add substractor after menu, choose toggle behavior, menu toggle open and close icons as overall menu locations.

3) Sticky Menu Settings

In order to make any menu sticky, you can select specific menu location from this tab section to make the specific menu location as sticky menu. You can even enable sticky menu on mobile, Assign Sticky Opacity, Sticky Zindex and Sticky Offset.

WP Mega Menu Pro sticky menu

4) Image settings

WP Mega Menu Pro Image settings

In this tab you can set default settings regarding the wordpress image size options, set custom default width as well as menu icon hide/show and define icon width. You can either enable or disable all menu icons. If you want to change the image size according to image shown on specific menus you can even override the settings from specific menu location page.

5) Shortcode settings

In this tab you can use shortcode provided in any page, post content editor or widgets area. You can also use php function instead on your template files which specific menu location generated from shortcode tab. In order to display mega menu of specific menu location, firstly, you must need to enable WP Mega Menu from menu page for specific menu location from left section metabox options.

WP Mega Menu Pro Shortcode settings

6) Import/Export settings

In this tab, you can import/export the custom theme json file of this plugin and you can see it on list of theme settings on backend and again use it for your mega menu.

WP Mega Menu Pro Import/export settings

7) Custom CSS settings

In this tab, you can enable your own custom css and fill the custom css as per your requirement.

WP Mega Menu Pro Custom CSS settings


C) Theme settings

WP Mega Menu Pro Custom CSS settings

In this sub menu page, you can setup your own custom theme templates with more than 100+ customization options and more than 50+ google fonts available. The default custom template is also provided. In a same way, you can create your own custom templates and assign it to specific menu location from admin menu creation page.

WP Mega Menu Pro Custom CSS settings

D) Admin Menu Settings

WP Mega Menu Pro Admin Menu Settings

To enable WP Mega Menu Pro for specific menu location, on menu page, you can choose menu location and on left section you can find options settings as Select WP Mega Menu Pro Settings Metabox Options where you can enable wp mega menu pro, choose orientation as vertical or horizontal, choose trigger effect(show mega menu on hover or on click effect), transition effect(slide or fade type). Also WP Mega Menu has provided 14 Free Pre Available Templates/Skins or you can even setup your own custom theme templates and choose it from this section for specific menu location.
To setup mega menu or flyout type for particular menu. On hover menu you can find WP Mega Menu Pro Button where you can setup options menu wise. In these options, you can set mega menu type sub menu for top level menu only.


E) Top Level Menu Settings

In these Settings, you can set the top level menu as mega menu type or flyout type for its sub menu display. Here, after selecting mega menu type, you have extra options to configure choosing mega menu as single or group mega menu type which is described below briefly.

1) Single Group Settings

After choosing mega menu as menu type for specific menu , here it provides an advanced feature to choose mega menu type as single or multiple type. On choosing single group, you can set single column number and choose any wordpress widgets from ADD WIDGET Button above and set its column which works same as free plugin type mega menu.

WP Mega Menu Pro Single Group settings


2) Multiple Group settings

On choosing multiple group mega menu, you can even create multiple group tabs and choose each group with different total column number, and even can edit its column number later. Then you can choose widgets, set widgets on each particular group separately as per your wish. You can add/edit/delete group for specific menu and choose widgets to set on specific group .You can even sort out the widgets as per you like in an specific order.
Note: In Multiple group settings,it have some limitation that the sub menus will always be listed on first group. You cannot keep the sub menu on another group but you can sort its order in first group.

WP Mega Menu Pro Multiple Group settings
WP Mega Menu Pro Multiple Group settings

CREATE GROUP

Click on ADD GROUP BUTTON as shown in above screenshot. Then popup form with adding new group with column number will be displayed as shown on below screenshot images.

WP Mega Menu Pro Add Group settings

EDIT GROUP

Click on ADD GROUP BUTTON as shown in above screenshot. Then popup form with adding new group with column number will be displayed as shown on below screenshot images.

WP Mega Menu Pro Edit Multiple Group settings

You can add multiple widgets column wise from “ADD WIDGET” button. You can sort selected widgets in order, automatic save data of widgets from this section.
Below is the image shown after click on add widget button where list of default wordpress widget are listed on one tab, wp mega menu plugin has also provided 13 custom pre-available widgets with different layout for woo-commerce and products.For more details of widget provided are described on section Widget Information below And last tab is with lists of all woo-commerce widgets so you need to install and activate woo-commerce plugin in order to get its widgets.


On Top level Menu Settings there are 7 extra main settings options described below:

1) General Settings

WP Mega Menu Pro TOP General settings

General Settings, where there is multiple options such as

  • Disable Menu Text : Enabling Disable On Menu Text, the menu text neither the menu description will be not be shown so height is set to 0px.
  • Active link: Active menu link or inactive it from this button.
  • Visible Hidden Menu Text : you can hide visibility but with height of menu being shown by activating this button.
  • Hide Menu on Mobile: From this button, you can hide the specific menu on mobile.
  • Hide Menu on Desktop: From this button, you can hide the specific menu on Desktop.
  • Show Menu Icon : On Enable, you can show menu icon selected for specific menu.
  • Active Single Menu : Enable single menu if menu is custom single menu link. Useful for Any Custom Links such as social links. This button must be enable in order to display custom links such as for social icons
  • Menu Item Alignment : Right aligned items will appear in reverse order on the right hand side of the menu bar.
  • Menu Label : Fill menu label here for specific menu item such as Hot!, New!, Update.
  • Sub Menu Alignment : Specially for flyout menu only. With left and right features, right position will show the flyout sub menu on right side whereas left position will show sub menu from left side
  • Menu Label Animation : You can choose specific animation type for this menu label.Default is set as None which will disable animation.
  • Animation Iteration Count : You can also fill the animation Iteration count in number such as 2,3. You can also use “infinite” word instead of number which let the animation to repeat forever.
  • Menu Visibility on User Based : You can choose show this menu as per logged in users , logged out users or show always options for specific menu.

WP Mega Menu Pro TOP General settings


2) Mega Menu Settings

WP Mega Menu Pro TOP Mega Menu settings

In these Settings, you can even setup Mega Menu settings for horizontal position and vertical position. In Mega Menu Settings, you can even add extra top and bottom content with only text, only image or use html content to display for mega menu type only.

  • Show Top Section : Enable Top section for mega menu settings.
  • Show Bottom Section : Enable Bottom section for mega menu settings.
  • Show Top Section Type : You can show only text, only image or html content on top section.
  • Show Bottom Section Type : You can show only text, only image or html content on bottom section.
  • Mega Menu Horizontal Positions: Select mega menu position display type for horizontal as full-width, left, right or center type.
  • Mega Menu Vertical Positions: Select mega menu position display type for vertical as full-height or aligned to parent type.
3) Flyout Settings

WP Mega Menu Pro TOP Flyout settings

In these Settings, you can even setup Flyout settings for horizontal position and vertical position. In Flyout Settings, you can display for flyout in different positions for horzontal or vertical menu type.

  • Flyout Horizontal Positions: Select Flyout position display type for horizontal submenu as left or right side.
  • Flyout Vertical Positions: Select Flyout position display type for vertical as full-height or aligned to parent type.
4) Menu Replacement Settings
WP Mega Menu Pro Menu replacement  Settings

In Menu replacement settings, you can replace the menu in different type such as logo image, search type, register form display type or woocommerce cart total type. If you want to display menu in search form then you can simply choose Menu replacement Settings options and select search type from dropdown button options where you can add shortcode to display search form as inline toggle left or right position or mega menu type. Simply you can use the provided search shortcode in textarea.
For search type shortcode are provided below as per your requirement you can choose any search form layout and set on search type menu replacement textarea fields:

  • Inline Search Toggle Left: [wp_megamenu_search_form template_type=inline-search style=inline-toggle-left]
  • Inline toggle to Right: [wp_megamenu_search_form template_type=inline-search style=inline-toggle-right]
  • Popup Search Form: [wp_megamenu_search_form template_type=popup-search-form]
  • Display Search form on MegaMenu: [wp_megamenu_search_form template_type=megamenu-type-search]

Similarly, you can even display login form on popup form with the shortcode provided below:
Login Shortcode : [wp_megamenu_login_form]

else you can choose register form menu type where register form will be shown on popup form on click the menu being replaced as register type.For register form you can add below shortcode of wp mega menu pro plugin

Register Shortcode : [wp_megamenu_register_form]

WP Mega Menu Pro Logo Image

Another menu replacement option is custom logo image where you can upload custom logo image to show on menu. Here you can even set specific custom width and height for uploaded custom image.

You can also replace menu as woocommerce cart total display. For this, you simply need to choose woocommerce cart total in menu replacement settings dropdown options and fill the woocommerce default settings on WP Mega Menu Pro Menu settings in General Settings Tab section which is shown in screenshot below.

WP Mega Menu Pro Woocommerce Default Settings

5) Icon Settings
WP Mega Menu Pro top flyout settings

These Settings also contain Icon Settings where you can choose menu icon from multiple font icons sets.
Menu Icon Settings contains 650+ FontAwesome, 120+ Genericon and 160+ Dashicons, 400+ IcoMoon and 40+ Line Icons.Here you can even upload custom icon and set its custom width and height for particular menu.

WP Mega Menu Pro Icon Settings

6) Background Image Settings

In order to upload Background image for specific mega menu, you can enable this settings. There are options to upload single Background image or double background image. On choosing single background image, you can upload single image to display it on particular mega menu.Or else choosing double background image, you can upload two image and set animation as cross fading type where image will be changed on hover effect or change the first background inage to another uplaoded background image on hover on specific time duration. You can even set time duration for this changes.

WP Mega Menu Pro Background Image Settings

7) Other Settings
a) Custom Styling Settings:


WP Mega Menu Pro Other Custom  Settings
In this settings, you can set different custom styling for each menu items. This values setup will override the styling setup of available theme as well as custom theme. This includes overriding styling for background color,Background Hover Color,Menu Font Color,Menu Icon Color,Sub Menu Background Color and many more. You can even define Sub Menu Width too from this settings in px.
WP Mega Menu Pro Background Other Settings

b) Roles & Restriction Settings:


WP Mega Menu Pro Background Image Settings
From this settings, you can choose any roles or restriction in order to hide specific menu item according to this settings. You can hide the menu item to only logged out users or logged in users or all users except administrator or else you can choose specific roles in order to hide specific menu item role wise.

This level menu includes following tab options:

  • Sub Menu Settings:

    In this Settings, there is multiple options such as active link, show menu icons, menu label input field, disable menu text, hide menu on desktop, hide menu on mobile, active single menu useful for displaying custom menu, set menu alignment as left or right(only for top level menu used) an sub menu alignment for flyout settings for sub menu.We have feature to set menu label and choose different menu animation with iteration count to different menu label as per menu wise.

    • Disable Menu Text : Enabling Disable On Menu Text, the menu text neither the menu description will be not be shown so height is set to 0px.
    • Active link: Active menu link or de-active it from this button.
    • Visible Hidden Menu Text : you can hide visibility but with height of menu being shown by activating this button.
    • Hide Menu on Mobile: From this button, you can hide the specific menu on mobile.
    • Hide Menu on Desktop: From this button, you can hide the specific menu on Desktop.
    • Show Menu Icon : On Enable, you can show menu icon selected for specific menu.
    • Active Single Menu : Enable single menu if menu is custom single menu link. Useful for Any Custom Links such as social links. This button must be enable in order to display custom links such as for social icons
    • Menu Item Alignment : Only for top level menu options provided.
    • Menu Label : Fill menu label here for specific menu item such as Hot!, New!, Update.
    • Sub Menu Alignment : Specially for flyout menu only. With left and right features, right position will show the flyout sub menu on right side whereas left position will show sub menu from left side
    • Menu Label Animation : You can choose specific animation type for this menu label.Default is set as None which will disable animation.
    • Animation Iteration Count : You can also fill the animation Iteration count in number such as 2,3. You can also use “infinite” word instead of number which let the animation to repeat forever.
    • Menu Visibility on User Based : You can choose show this menu as per logged in users , logged out users or show always options for specific menu.
    • Activate View more button (NEW FEATURE) : YOu can add extra sub menu name view more and activate this button in order to display as view more button at last of sub menu lists on mega menu.

    WP Mega Menu Pro Sub Menu Settings

  • Icon Settings

    This Settings also contain Icon Settings where you can choose menu icon from multiple font icons sets.
    Menu Icon Settings contains 650+ FontAwesome, 120+ Genericon and 160+ Dashicons.Also you can upload new/custom icon too from here and define its width and height in px.

    WP Mega Menu Pro Sub Menu Icon Settings

  • Custom Settings:

    WP Mega Menu Pro Sub Menu Custom Settings
    In these Settings, you can set sub menu as custom settings type where you can extract the post details such as featured image, excerpt, display author, category name, date and read more button. Here, You can even show custom image by choosing custom image and providing custom URL link. Similarly, you can display custom or featured image of particular post type sub menu on different position such as top, left or right or only image type on mega menu.

    WP Mega Menu Pro Sub Menu Settings

  • Image Settings:

    WP Mega Menu Pro Image Sub menu Settings
    In these image settings, you can choose either default image size settings set from Main Image Settings or simply choose different settings from here for particular post type sub menu featured image or custom image size. Also, if you can use custom image on Custom settings then , you can enable to use default custom image size setup before or fill different image size.

    Image Sub menu Settings

G)Advanced Menu Items Settings

WP Mega Menu Pro Plugin now provides 2 tabs layout as horizontal and vertical tab. You can find this feature on main admin menu page left section metabox.
After adding top level menu, to create horizontal tab section, you need to add
Horizontal Tabs Block(A group of horizontal tabs). A specific tab menu will be added as sub menu as horizontal tab main wrapper where you need to add its first tab menus/submenu and its respective other content menus. Similarly, you can choose
Vertical Tabs Block A group of vertical tabs and do same process in order to display vertical tab inside megamenu.Below is the screenshot shown with Advanced Menu Items Section.
WP Mega Menu Pro Advanced Menu Item Settings
Addinfg Tab section process are briefly described below:

  • For Horizontal Tab Menu

    WP Mega Menu Pro Advanced Menu Item Settings
    To create horizontal Tab Mega Menu following the simple and easy steps described below with screenshot as shown above.

    • Step #1 : Go to admin menu page.
    • Step #2 : First of all, add top menu on admin menu page such as on screenshot you can see Horizontal Tab as top menu.
    • Step #3 : Secondly, in order to create horizontal tabbed mega menu, select “Horizontal Tabs Block A group of horizontal tabs.” and click on Add to Menu button. Then your horizontal tabbed wrapper will be created simply by adding this menu where you can add tab button and its content as required. Here on our above screenshot, you can see there are four sub menu added such as Awards, News, Events and Celebration. These third sub menu will be working as your horizontal tabbed menu title button which on click will show the respective content of it.
    • Step #4 : Add another sub menu for created menu title. These sub menu will be working as the content for
      specific sub menu items on click process. See Screenshot below:

    WP Mega Menu Pro Advanced Menu Item Settings
    To display sub menu tabbed content as custom settings, then on hover specific menu item, select WP Mega Menu Pro button.
    Go to Custom Settings, as shown on screenshot image below, you can set custom settings for specific sub menu items as content display type.
    WP Mega Menu Pro Advanced Menu Item Settings
    Then your final horizontal tab will be as shown in below screenshot.
    WP Mega Menu Pro Advanced Menu Item Horizontal Settings

  • For Vertical Tab Menu

    To create vertical Tab Mega Menu is same as creating horizontal tabbed mega menu. Here we need to select Vertical Tabbed advanced menu items as a wrapper i.e [Tabs] instead of horizontal tabbed advanced menu items[HTabs] from WPMM PRO : Advanced Menu Items Lists as shown on below screenshot.

    WP Mega Menu Pro Advanced Menu Item vertical Settings
    To display vertical tabbed inside mega menu, you can simply add another top level menu item and then add advanced menu item “Vertical Tab”[Tabs] on menu section which will work as main vertical wrapper and follow the further process as shown on below screenshot to display vertical tabbed mega menu.
    WP Mega Menu Pro Advanced Menu Item :Vertical Tab Menu Settings
    Then your final vertical tab mega menu will be as shown in below screenshot.
    WP Mega Menu Pro Advanced Menu Item :Vertical Tab Menu Settings

    Custom Image Inside Tabbed Section:

    To display Custom Image as shown on above screenshot inside Tabbed , you need to follow below steps:

    Step 1: Add any menu items as posts or add menu items from custom links as shown in screenshot below.

    Step 2: On hover click on WP Mega Menu Pro Button, you can go through below screenshot process in order to display any menu items as custom image or any posts menu items with its featured images, excerpt and many more options.

    Step 3: Go to Image Settings to set your own custom image width if needed.

    Display Menu items with its Featured Image :

    To display menu items such as any post menu items with its featured image, excerpt then, you need to follow below steps:

    Step 1: Add any post to menu section as sub menu items as shown in screenshot below.

    Here, News is top menu level whereas it has 4 sub menu items. To display each sub menu post items with its featured image then you need to follow the below next steps.

    Step 2: Click on WP Mega Menu Pro hover button of News Ad #1 or your created sub menu first,

    Go to Custom settings tab section, here enable custom settings and then you can configure specific required
    options for this post menu items such as you can choose display featured image of specific post, show its excerpt with length limit, display read more button, category, author name, category name and also choose the position of
    displayed image as top, left ,right of content or only show featured image of the specific post.

    Step 3: At last, you can also set image size for specific featured image of the specific posts.
    If choose default , then the default setting for image size will be set for display image size. You can set default image size from our plugin Image settings from General settings page.
    With all these above configuration then you can display menu items with extra outstanding design and managed the menu items in your own way.

H) Widget Information

WP Mega Menu Pro Custom Widgets Settings

To display WP Mega Menu Pro of specific menu location, WP Mega Menu Pro has provided WP Mega Menu Pro Widget on widget page where you can choose particular menu location and set on the widget area. Else you can use provided shortcode generated from shortcode tab on any other page or default Text Widget.
WP Mega Menu Pro Custom Widgets Lists
WP Mega Menu Pro Plugin now provides different attractive, advanced and useful 13 pre available custom widgets such as WPMM PRO which are listed below:

  • A) Widget Related with Posts Display:
    • 1) WPMM PRO : Advanced Posts Slider Widget
    • 2) WPMM PRO : Display Posts By Category
    • 3) WPMM PRO : Gallery Shortcode Widget
    • 4) WPMM PRO : Posts Format Widget
    • 5) WPMM PRO : Recent Posts Widget
    • 6) WPMM PRO : Posts Timeline
  • B) Widget Related with Woocommerce Products Display:
    • 7) WPMM PRO : Products Lists Widget
    • 8) WPMM PRO : Recent Products Lists Widget
    • 9) WPMM PRO : Woo Products Layout 2 Widget
  • C) Extra Widget:
    • 10) WPMM : Contact Info
    • 11) WPMM PRO : Text Image Widget
    • 12) WPMM PRO : Custom Image Widget
    • 13) WPMM PRO : Featured Box Layout

This documentation tried to cover as much details about plugin to ease your plugin experience. To see screenshots of plugin backend and frontend templates, you can see them here


Available layout Screenshots