Full Documentation With Video Tutorials

Get Started

WP Mega Menu Pro - Truly Powerful and feature-rich Mega Menu Builder Plugin with 12+ Pre Available Beautiful Skins, 10+ Pre Available Templates, 10+ Custom Advanced Widgets & Horizontal/Vertical Mega Menu Layouts with 100 + Customization Options Features. We’ll guide you from installation and activation steps through to displaying and configuring your mega menu using our plugin with easy way. In this documentation, we will guide you with following steps:
  1. Installation & Activation
  2. Requirements
  3. Menu / Sub Menu (Flyout) Creation
  4. Menu Location Creation

Installation & Activation

After buying our plugin or any other plugin, You can download either or both of the two types of plugin packages - full version with documentation and ready to install WordPress plugin.

If you download the Installable WordPress file only then you can go and install it accordingly.

If you download the full package including documentation and extensions then unzip the file and find the folder named web install. You will find the installable zip file of the plugin inside this folder.

A) Installing Instructions

  1. Unzip wp-mega-menu-pro.zip
  2. Upload all the files to the /wp-content/plugins/ directory of your site.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. For the setup default plugin’s settings, click on “WP Mega Menu Pro” menu in the WordPress admin menu on the left section of the admin menu.
  5. To set the mega menu or fly-out in the front-end existing or new menu, go to back-end WordPress Appearances > Menus ( create/edit menu page), then create a menu location if not any exist on your theme. Create your required menu items lists and assign with specific menu location to enable WP Mega Menu Pro plugin for your menu.
  6. On the left section, you will find “Select WP Mega Menu Pro Settings” where you can enable the mega menu for specific menu location with many other configuration options.

B) Premium Plugin Installation Process:

There are mainly two different ways to install or update the plugin in your WordPress site.
  1. Via Default WordPress Plugin Uploader
  2. Via FTP

Step 1: Via Default WordPress Plugin Uploader

Download WP Mega Menu Pro plugin file from Codecanyon after purchase and upload directly through WP plugin upload page. For premium plugin update, please do backup old version plugin file, delete the file from Plugin List from admin panel and then upload, install latest version plugin downloaded file.
  • Log into your WordPress admin panel
  • Go to Plugins > Add New > Click on Upload Plugin button and Select your downloaded plugin file or Main Plugin ZIP file and Install the plugin file.
  • Activate the plugin through the ‘Plugins’ menu in WordPress.

Step 2: Via FTP:

Download WP Mega Menu Pro plugin file from Codecanyon after purchase and upload via FTP.
  • Decompress the .zip file you downloaded from CodeCanyon.
  • Find wp-mega-menu-pro folder after unzipping the file.
  • For update plugin, backup old version plugin file and delete the file first.
  • Upload the wp-mega-menu-pro folder to your wp-content/plugins directory.
  • Go to your WordPress Site's admin panel > Plugins then activate our plugin.

Menu Creation

  1. If you don't already have a Menu then set up by creating 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. Create a New Menu Go to Appearances > Menus and click on create a new menu if there is no menu on your site.
  2. Add menu items and assign theme location.
  3. If your theme doesn't have any menu (theme) location, then create one adding below code on your theme's functions.php file. If your theme's functions.php file already contain action hook after_setup_theme' then you can add below register_nav_menu code inside specific function hook with 'after_setup_theme' action. This below code will add new menu location name 'Horizontal Menu' on Menu settings which is required to assign for specific menu in order to display our plugin's mega menu enable metabox settings.
     
    	add_action( 'after_setup_theme', 'register_my_menu' );
    	function register_my_menu() {
    	  register_nav_menu( 'horizontal-menu', __( 'Horizontal Menu', 'theme-slug' ) );
    	}
      

Requirements

The following are requirements while using our mega menu plugin.
  1. WordPress 4.8+
  2. Please Use of the WordPress Menu System (in Appearance > Menus)
    • Create Menu if not exist
    • Create Menu (Theme) Location if not exist
    • Assign theme location to specific menu in order to integrate mega menu and enable our plugin. To create new theme location if not exist, then please check documenation link "Create Theme Location".
    • Proper use of the wp_nav_menu function
    • Compatible with all themes that are coded with WordPress Standard. Although in some cases, there might be conflict with theme CSS and JS file, but to resolve it , we need to add few custom CSS or JS where necessary.

Menu Configuration

Integrate mega menu, flyout menu as per our plugin setup for default theme menu or newly added menu in an ease way direct from Appearances > Menus page itself. After assigning already existed menu or newly created menu to any specific menu (theme) location at first, in order to integrate our plugin's setup on your site's menu using our plugin, you will find meta box settings "Select WP Mega Menu Pro Settings" with options such as
  1. Enable WP Mega Menu Pro?
  2. Orientation as Horizontal or Vertical Type
  3. Trigger Effect (hover or on click)
  4. Transition Effect - (slide, fade and many more).
  5. Choose Theme Type - Pre Available Templates or Custom Theme.
  6. Mobile Options - Enable Mega Menu On Mobile?
  7. Mobile Options - Mobile Menu
  8. Mobile Options - Disable Menu Toggle?
On enabling this setting, you will find a blue button on each menu items right side named "WP Mega Menu Pro Settings" when hovering on it. To configure mega menu or flyout type with other configuration settings, simply click on the button.

Pre-available Skins Or Templates

In Appearance > Menus > Select WP Mega Menu Pro Settings Metabox > Choose theme type > Available Skins/Templates or Custom Theme WP Mega Menu Pro comes with a variety of pre-available skins and menu templates. Our plugin provides 14 Pre Available Skins and 10 Beautifully designed menu templates are available.

14 Pre Available Skin Lists:

10 Pre Available Menu Template Lists:

Orientation & Trigger Effect

Using our plugin, you can display menu in 2 orientation i.e Horizontal and Vertical menu way. You can set orientation as per your requirement on your site. Similarly for trigger effect, our plugin has provided 2 option to open mega menu or flyout menu on click or on hover function.

Transition

In Appearance > Menus > Select WP Mega Menu Pro Settings > Transition Option Dropdown Lists. Our plugin offers 10 transition options for your dropdown submenus:
  1. Fade
  2. Slide Left
  3. Slide Right
  4. Slide Down
  5. Slide Up
  6. Slide Up With Fade
  7. Slide Down With Fade
  8. Super SlideDown
  9. Zoom In/Out
  10. Flip Effect

Custom Theme Settings

Assign Menu With Custom Theme:

In Appearance > Menus > Select WP Mega Menu Pro Settings > Choose Theme Type > Custom Theme Option Dropdown Lists. Our plugin provides the feature to either assign pre available templates/skins or use custom theme options lists. The default theme is one of the custom theme already created right after the plugin activation as a default one.

Theme Settings:

For configuration or customization of a custom theme, go to WP Mega Menu Pro > Theme Settings page , you will find lists of custom theme with Default theme already available right after the plugin installation and activation. Similarly, you can copy the same custom theme and customize menu background color, font color , flyout menu items customization option, mega menu customization option, responsive options and many more.

List of All Custom Theme:

Customization Options:

You can even assign Custom theme where you can customize your menu's font color, background color and many more customization option are available to set if you don't want to use pre available skins or templates.
It includes the following customization option:
1) Main Settings:
2) Menu Bar Settings:
3) Top Level Menu Items Settings:

Each Menu Item Configuration

In Appearances > Menus page, on hover each menu items, click on a blue button "WP Mega Menu Pro" setting button a popup form will open where you can configure many options for the specific menu item.
On popup form for each menu items, you will find the following tab.

For Top Level Menu Items:

  1. Wp Mega Menu Pro Settings - Assign mega menu or flyout
  2. General Settings
  3. Mega Menu Settings
  4. Flyout Settings
  5. Menu Replacement Settings
  6. Icon Settings
  7. Background Image Settings
  8. Other Settings

For Sub Menu Item Settings :

In sub menu items, you cannot configure or add mega menu. You can only add mega menu to top level menu items.
  1. Sub Menu Settings
  2. Icon Settings
  3. Custom Settings
  4. Image Settings

General Settings

Configure option separately for each menu items from general settings tab section.
Below is the description for each option:

A) General Settings for Top Level Menu Items:

  1. Hide Menu Text: This option is not so useful or applicable for Top Level menu items.
  2. Disable Description: Enable this option in order to hide menu's description.
  3. Hide Menu Text With Visible Height: This option is not so useful or applicable for Top Level menu items.
  4. Active Menu Link: Enable this option in order to active specific menu link.
  5. Hide Arrow: Enable this option in order to hide this menu arrow.
  6. Hide Menu On Mobile: Hide this specific menu item on mobile view.
  7. Hide Menu On Desktop: Hide this specific menu item on desktop view.
  8. Show Menu Icon: Important Note: Enabling this option is compulsory if you want to display menu's icon choosen In 'Icon Settings' tab for this specific menu item.
  9. Active Single Menu: Enable single menu option if only menu is “custom single menu” link. Useful for all Custom Single Menu Links such as social links(facebook, twitter and others). Note: This option must be enable in order to display custom links such as for social icons.
  10. Menu Item Alignment - (Left and Right ) Used for only top level menu items. Right aligned menu items to appear in reverse order on the right hand side of the menu bar. Specially required for search icon and other custom links such as displaying social icon (facebook, twitter) to display at last of menu item. With Left Alignment:
    With Right Alignment:
  11. Sub Menu Alignment: Specially for fly-out menu only, not for mega menu type. Choose individual flyout menu display position as left or right side. 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
  12. Menu Label:Fill menu label such as HOT!, NEW!, UPDATES! and so on.
  13. Menu Label Animation: Choose specific animation type for this menu label. Default is set as None which will disable animation.
  14. Animation Iteration Count: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.
  15. Menu Visibility on User Based: Choose to show specific menu as per logged in users , logged out users or show always.

B) Sub Menu Item's General Settings:

  1. Hide Menu Text: Useful for all sub-level menu items. Enabling this option, specific the menu title will be hidden and the menu height will automatically set to 0px. Mostly useful for below setup:
  2. Disable Description: Enable this option in order to hide sub menu's description.
  3. Hide Menu Text With Visible Height:Useful for all other sub-level menu items.Enable the options if you want to hide the menu title but the actual height of menu title will be displayed on front-end as blank space. After enabling this option, you can display menu item as shown on below screenshot.
  4. Active Menu Link: Enable this option in order to active specific menu link.
  5. Hide Arrow: Enable this option in order to hide this sub menu's arrow.
  6. Hide Menu On Mobile: Hide this specific sub menu item on mobile view.
  7. Hide Menu On Desktop: Hide this specific sub menu item on desktop view.
  8. Show Menu Icon: Important Note: Enabling this option is compulsory if you want to display menu's icon choosen In 'Icon Settings' tab for this specific sub menu item.
  9. Active Single Menu: Enable single menu option if only menu is “custom single menu” link. Useful for all Custom Single Menu Links such as social links(facebook, twitter and others). Note: This option must be enable in order to display custom links such as for social icons.
  10. Menu Item Alignment: Only Used for only top level menu items.Disabled for sub level menu items.
  11. Sub Menu Alignment: Specially for fly-out menu, not for mega menu type. Choose individual flyout sub menu display position as left or right side. 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
  12. Menu Label:Fill sub menu label such as HOT!, NEW!, UPDATES! and so on.
  13. Menu Label Animation: Choose specific animation type for this menu label. Default is set as None which will disable animation. Animation provided are Bounce,flasgh, shake, swing, tada,bounceIn,flipInX, flipInY,slideInUp and slideInDown.
  14. Animation Iteration Count: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.
  15. Menu Visibility on User Based: Choose to show specific menu as per logged in users , logged out users or show always.
  16. Activate View More Button: You can even display sub menu items as button type and enable this options in order to display as view more button at last of sub menu lists on mega menu with its customization color options. Backend Options:
    Frontend Display:

Menu Item Styling

Using our plugin, you can even set custom styling for each menu item separately. Style your individual menu items With Menu Item Styling i.e Other Settings tab you can:
  • Enable All Custom Styling - A common enable option for all.
  • Set Background Color, Background Hover Color.
  • Apply custom menu font color and hover colors to individual items.
  • Change the size and color of a menu item icon
  • Set sub menu i.e mega menu widths individually.
  • Set custom content color for sub menu items as well as configure Menu Icon Color/Hover color of individual menu items.
  • Many More On New Version Updates!
Options Available are:
  1. Enable All Custom Styling - Set this checkbox to true in order to integrate all other customization options.
  2. Background Color - Set background color for top level menu items.
  3. Background Hover Color - Set background hover color for top-level menu items.
  4. Menu Font Color - Set custom font color for the specific menu item.
  5. Menu Hover Color - Set custom font hover color for the specific menu item.
  6. SubMenu /Mega Menu 's Width - Set custom mega menu width. Only use number in this field, don't add px or pixel word at last of the number. Note: This option is necessary since the mega menu width is fully dependent on the total menu bar width. So, if your theme has very less number of menu items then mega menu width will be displayed with small width equal to menu width which is why this custom option is required to increase specific mega menu width in pixel.
  7. Submenu/Mega Menu Background Color - Set background color for the mega menu for the specific menu.
  8. Sub Menu Header Font Color - Set custom font color for title content which can be widget's title or second level menu items inside mega menu section.
  9. Sub Menu Content Color - Set custom content color for submenu items lists (third level or more..) or widget's content inside the mega menu section.
  10. Menu Icon Color - Set custom color for specific menu icon. Only for pre available icons not for custom image type.
  11. Menu Icon Hover Color - Set custom hover color for specific menu icon.Only for pre available icons not for custom image type.

Video Tutorials :

Mega Menu Integration

Mega Menu is simply a large panel where you can add unlimited content such as widgets and display submenu items, position it in order. Open mega menu as same as flyout menu on click or on hover top level menu items. In order to integrate mega menu functionalities on your site's menu using our plugin, we need to assign a specific menu to anyone menu location at first then on the left section of Menus Page, you will find meta box settings "Select WP Mega Menu Pro Settings" with options such as Enable WP Mega Menu Pro, orientation (Set menu as horizontal or vertical type), trigger effect(hover or on click), transition effect(slide, fade and many more). On enabling this option, the specific default menu will be overridden by our plugin settings and design layouts for desktop as well as for mobile version. On enabling this setting, you will find a blue button on each menu items right side named "WP Mega Menu Pro" when hovering on it. To configure mega menu or flyout type with other configuration settings, simply click on the button.

Assigning A Mega Menu In Menu Item:

By default, submenu items will be displayed in a Flyout i.e dropdown submenu on your site. To convert a Flyout menu to a Mega Menu, click on the blue button "WP Mega Menu Pro" and go to WP Mega Menu Pro Settings (First tab) and select Mega Menu in Submenu display mode instead of Flyout Menu. If the specific menu has its submenu items already then all the submenu items will be listed on the mega menu section. Further, you can add widgets and manage to display both submenu items and widget in order by simply drag and drop functionalities. You can even minimize or maximize the width of specific submenu items or widgets and fix overall total column for mega menu.

Video Tutorials related to adding widgets, submenu items in the mega menu:

Top & Bottom Mega Menu Section

In Mega Menu, our plugin also provides the feature to add top and the bottom section inside the mega menu. Open WP Mega Menu Pro setting for the specific menu item, go to Mega Menu Settings tab section and enable top and bottom content, select top/bottom content type as Text only, Image Only or Custom HTML type.

More Configuration Options

Each menu item's mega menu can be configured individually from popup form settings box > Mega Menu Settings tab section where you can configure mega menu horizontal position such as Full width, center, left edge or right edge display position of mega menu. Similarly, for the vertical mega menu, our plugin provides an option Mega Menu Vertical Position with Full height and aligned to the parent dropdown option for each menu items.

Video Tutorials:

Mega Menu Group System

Using our plugin "WP Mega Menu Pro", you can display mega menu in 2 different way i.e
  1. Single Group Mega Menu
  2. Multiple Group Mega Menu
Back-end Options Setup:

Single Group Mega Menu

1)Single Group Mega Menu Preview -

In single mega menu setup, you can add submenu items as well as widgets and drag and drop the position for it to set order inside the mega menu as per your need. For the added widget, you can configure content as provided by specific widget options. You can even minimize or maximum each column of sub menu items (second level) and widgets as per your requirement. Set the total column of mega menu as well from Choose Columns top header option.

Video Tutorials to Setup Single Group Mega Menu -

Multiple Group Mega Menu

2) Multiple Group Mega Menu Preview -

In Multiple mega menus, you can create an unlimited group inside mega menu where submenu items will be only listed on first group i.e Group 1 and it doesn't feature to display menu items on another group. But you can add widgets on any created group in the mega menu for a specific menu.

Video Tutorials - Setup Multiple Group Mega Menu

Frontend Preview-

Flyout Menus

By default, submenu items will be displayed in the flyout type i.e in hierarchical with dropdown style on hover or on a click event trigger. Flyout menus simply work as displaying one level of menu items at a time on hover or click and then expanding as the user hovers or clicks each level item.

Frontend View:

Backend View:

Configuration Video Tutorials: Flyout Menu Alignment

Menu Icons Settings

WP Mega Menu Pro Plugin also allows you to assign or set an icon for each menu item in your menu. To set an icon, go to Appearance > Menus and hover over the specific menu item in which you want to add an icon and click the blue button named ‘WP Mega Menu Pro’, a popup form settings will be opened where you have to click on the Icon Settings tab section then Select the ‘Icon’ on right side. You can set either pre available icon or upload a custom image for the menu item from the Icon Settings tab.

A) Pre Available Icon Sets Option:

There are altogether 7 pre available icon sets as provided below -
  1. Dashicons
  2. Linecons
  3. Font Awesome 4.7 and 5
  4. Genericons
  5. Icomoon
  6. Linearicons
  7. Themify

B) Upload Custom Image Settings:

Using our plugin, you can even upload a custom icon and set it to a specific menu item. Also set custom image's custom width and height as per your need.
Note: Only Setting pre available or custom icon to a specific menu will not display the icon on frontend's menu. You need to enable the main option as well i.e In General Settings tab > Show Menu Icon checkbox as shown on below screenshot.

Video Tutorials - Assign Icon to Menus

Menu Replacement Settings

Replacement Settings - consists of 5 pre available feature option to replace your menu items with. They are replacing your menu item as a logotype by uploading logo image, setting up search form with pre available shortcode implementation to display a popup or inline type, add menu items as login or register which will work by clicking on specific menu item and popup for login form or registration form will open as per assigned. Similarly, using our plugin, you can even set menu item as WooCommerce Cart type and display cart total count, price. This feature includes:
  1. Logo Setup
  2. Search Form
  3. Login/Register Form
  4. Woocommerce Cart

Logo Setup

WP Mega Menu Pro also includes functionality to replace menu items as logo type to display site logo or upload logo image on your menu.

To add a logo to menu item:

  1. Create a new custom menu item for your logo
  2. To add a custom Logo to your menu, first, add a ‘Custom Link’ item to your menu. 
  3. Hover on the menu item on which you want to display logo image, Click on the blue button "WP Mega Menu Pro" > Go to Menu Replacement Settings > Choose Logo Image
  4. Upload New logo image , even set custom width and height for menu logo as per your requirement. 
 

Video Tutorials - To Replace Menu Item as Logo Type:

 

Search Form

WP Mega Menu Pro also includes functionality to replace a menu item as a search box with 4 different pre available shortcodes to display search as inline left, inline right side, as popup search form or inside the mega menu. To create a Search Box for your menu, first, add a ‘Custom Link’ item to your menu with named "Search" and then click on WP Mega Menu Pro Blue button on hover a specific menu item, go to Menu Replacement Settings > Choose Search Type.

Check Video Tutorials for displaying Search box in your menu:

There are total 4 behavior shortcodes available for the search box. Use Shortcode for search menu as
  1. Inline Search Toggle Left: Use shortcode
    [wp_megamenu_search_form template_type="inline-search" style="inline-toggle-left"] 
  2. Inline toggle to Right search form: Use shortcode
    [wp_megamenu_search_form template_type="inline-search" style="inline-toggle-right"]
  3. Popup Search Form: Use shortcode
    [wp_megamenu_search_form template_type="popup-search-form"]
  4. Display Search form on MegaMenu : Use shortcode
    [wp_megamenu_search_form template_type="megamenu-type-search"]
    In order to setup search form inside mega menu, one need to choose menu type as mega menu instead of flyout for this shortcode search form.
Note: Our plugin does not control the results shown on your search results page and neither add any new input field on the search form. The search's form content will be displayed as per your theme's setup i.e the same search form's input fields will be displayed that is used by your active theme as default.

Login/Register Form

To add login and register form as a popup, our plugin provides its own shortcode implementation field.

A) Login Form :

Steps to configure login form and use shortcode on menu:
  1. Add Menu item with named "Login". On hover click on blue button WP Mega Menu Pro Setting which opens popup form.
  2. Click on Menu Replacement Settings tab section, choose Login Form and add shortcode below textarea. Use our Default Login form Shortcode or any other external login custom shortcode for user login process to display on popup modal frontend view. Default Login Form Shortcode :
    [wp_megamenu_login_form] 
  3. You can even add icon to this menu items by enabling "Show Menu Icon" option from General Settings tab and then Go to Icon Settings tab and choose respective icon then save the final changes. Check on frontend view.

Video Tutorials -To Setup Login Form :

B) Register Form :

Steps to configure register form and use shortcode on menu:
  1. Add Menu item with named "Register". On hover click on blue button WP Mega Menu Pro Setting which opens popup form.
  2. Click on Menu Replacement Settings tab section, choose Register Form and add shortcode below textarea. Use our Default Register form Shortcode or any other external register custom shortcode for user register process to display on popup modal frontend view. Default Login Form Shortcode :
    [wp_megamenu_register_form]
  3. You can even add icon to this menu items by enabling "Show Menu Icon" option from General Settings tab and then Go to Icon Settings tab and choose respective icon then save the final changes. Check on frontend view.

Video Tutorials -To Setup Register Form :

Woocommerce Cart

Our plugin also provides functionality to replace an existing any menu item with WooCommerce cart total display as well and even add an icon on the specific menu item. We’ll use this functionality to add a WooCommerce cart total to the menu.

Steps to add a WooCommerce Cart Total to your Menu

  1. Create or add a new menu item named "Cart" or simply use the Cart page as one of the menu items in order.
  2. On specific cart menu item, on hover open our plugin's mega menu settings popup form > go to Menu Replacement Settings tab section and choose WooCommerce Cart Total as a Replacement.
  3. Set a ‘Cart’ Icon for the menu item from pre available icons or you can upload custom icon as well.

Check out Video Tutorials for implementing WooCommerce Cart in your menu:

For more flexibility, Go to main plugin settings page > General Settings page and configure HTML structure of the cart's content display from various options available as main settings.

Orientation

Our plugin provides a feature to display menu in 2 ways i.e Horizontal and Vertical Menu Orientation. For configuration, please go to Appearance > Menus > Select WP Mega Menu Pro Settings Left Metabox Configuration > Orientation.
You can even configure template type as Pre available templates or skins or choose custom theme of your own.
  1. 1. Horizontal Menu Layout Preview

    To integrate your menu to a horizontal way, Go to Appearances > Menus > Select WP Mega Menu Pro Setting left meta box > Orientation > Select Horizontal from the dropdown list.

    Setup Process:

  2. 2. Vertical Menu Layout Preview

    To integrate your menu to a vertical way, Go to Appearances > Menus > Select WP Mega Menu Pro Setting left meta box > Orientation > Select Vertical from the dropdown list.

    Setup Process for Vertical Left Alignment & Right Alignment:

    Note: The vertical menu alignment simply works for displaying mega menu on hover for right or left direction. For the overall menu position your theme should setup the menu position on left sidebar or right sidebar accordingly. For menu displayed on left section as left sidebar. then implementing vertical menu on it you have to display mega menu to right side so for alignment type choose Vertical Alignment Type as Right whereas if your menu is added on right sidebar, then mega menus should be displayed on left direction in such case, use Vertical Alignment Type as Left side which is also default setup.

Advanced Features

Our plugin also provides more advanced features. Please check below more feature list with its documentation.
  1. Menu Label Settings
  2. Social Icon Settings
  3. View More Button
  4. Custom CSS / JS
  5. Import & Export Settings
  6. RTL Support

Menu Label Settings

Assign Menu Label to Specific Menu Items, option available are -
  1. Menu Label (text) - Fill menu label such as HOT!, NEW!, UPDATES! and so on.
  2. Menu Label Animation - Choose specific animation type for this menu label. The default is set as None which will disable animation.
  3. Animation Iteration Count - Fill the animation Iteration count in number such as 2,3 for menu label. You can also use "infinite" word instead of the number which let the animation to repeat forever.

Frontend Preview -

One can assign specific animation to specific menu items from General Settings > Menu Label Animation.
Or You can even set common animation for all menu items from our plugin's main setting page WP Mega Menu Pro > General Settings tab as shown on below screenshot.

Social Icon Settings

To configure and display social icon type at the top level menu items, Go to Appearances > Menus > Add menu items for required social icons that need to be appended on menu bar respectively. After adding menu items related to a social icon such as Facebook, Twitter and so on. Hover on specific menu items and click on the blue button "WP Mega Menu Pro" > Go to General Settings tab section and follow the below steps:
  1. In the General Settings tab section, enable hide text option.
  2. Enable "Show Menu Icon" option.
  3. Enable the "Active Menu Link" option in order to active specific menu link for social icons which on default will be disabled.
  4. Enable the "Active Menu Link" option in order to active specific menu link for social icons which on default will be disabled.
  5. Enable the "Active Single Menu" option if an only menu item is “custom single menu” link i.e for social icons. Useful for all Custom Single Menu Links such as social links(facebook, twitter, and others). Note: This option must be enabled in order to display for social icons type.
  6. Choose Menu Item Alignment as Left or Right as per your requirement to display the icon on the left side of the menu bar or right side of the menu bar. Configure the alignment only if required.

Video Tutorials - Steps To Configure Social Icons Setup:

View More Button

To configure view more button inside mega menu section, Go to Appearances > Menus > Hover on specific sub menu items to replace the item as View More or any other button design type from General Settings tab section. One can even display submenu items as button type and enable this options in order to display as view more button at last of submenu lists on the mega menu with its customization color options. This feature includes the following options:
  1. Activate View More Button - Enable this option in order to activate button type such as view more, read more and many more texts as submenu items with links as per your need inside mega menu content.
  2. View More Button Background Color  - Set custom button background color.
  3. View More Button Background Hover Color - Set custom button background color on hover effect.
  4. View More Button Font Color - Set custom button font or text color.
  5. View More Button Font Hover Color - Set custom button font or text color on hover effect.

Steps to configure button:

  1. Add all top level menu items and its submenu items accordingly.
  2. Choose any one submenu items or last submenu items to set it as button type such as View More, Download, Read More button type display with respective links.
  3. Hover on specific submenu item for which you want to set button type, Click on blue button "WP Mega Menu Pro" button and click on General Settings tab > Activate View More Button checkbox in order to enable this feature on mega menu section. Only useful for mega menu display type.
  4. Backend Options:
  5. Frontend Preview:

Custom CSS / JS

In this tab settings, you can enable your own custom CSS and fill the necessary custom CSS as per your site requirement. In some cases, theme CSS might be an issue of conflict with plugin design layouts, which is why we have provided Custom CSS tab options so that you can easily add custom CSS to override the conflict issue. With the help of Custom CSS, you can even hide theme menu toggle for mobile version since our plugin provides its own menu toggle functionality.

A) Custom CSS Option -

B) Custom JS Option -

Similarly, our plugin also provides the feature to add external custom js as per your site requirement.

Import & Export Settings

In this tab, you can import/export the custom theme JSON file of this plugin and you can see it on the list of “Theme Settings” page.

Import/Export Settings Tab -

Theme Settings Page -

All the imported json file of custom theme will be listed on theme settings page.

RTL Support

Our plugin also supports RTL. To enable RTL functionalities, Go to General Settings main plugin page and enable RTL option checkbox.

Sticky Menu Settings

In order to make your menu sticky on the user page scroll, use this option to enable sticky functionality and make your menu fixed to the top at page scroll. Choose specific menu location which you want to implement sticky feature. You can even enable sticky menu on mobile, Assign Sticky Opacity, Sticky Z-index, and Sticky Offset respectively. Note: If your theme already provides sticky functionalities for a specific menu, then these options are not necessary.
    1. Enable Sticky Menu: Enable Sticky Menu for specific theme location.
    2. Choose Theme Location: Choose menu location on which you want sticky functionality on page scroll.
    3. Enable Sticky Menu On Mobile: Enable Sticky Menu on Mobile.
    4. Sticky Opacity: Set Sticky Opacity. Default value set to 0 which means the menu will be hidden on page scroll. Set to value 1 in order to display the menu on page scroll.
    5. Sticky z-index: Set Sticky z-index. Default value set to 999.
    6. Sticky Offset: Set Sticky Offset. Default value set to 0px. Set sticky menu position from top according to your site menu requirement.
Backend Options Preview -

Responsive Menu Options

The main settings for the responsive menu are on WP Mega Menu Pro > General Settings page which is our plugin's main settings page where you can get all the main default options for the whole setup of the menu. This settings page also includes configuration options for mobile setup > In mobile settings section as shown on below screenshot.

A) Main Settings Page - Common Mobile Settings :

Below are the options available -
  1. Enable WP Mega Menu Pro on Mobile - Check to enable menu display on the mobile version.
  2. Disable Submenu Retractor - Check to disable submenu retractor close button after toggle open on the mobile version.
  3. Toggle Behavior - Two options available. They are Standard and Accordion Toggle. Standard toggle will open submenus even if another menu is clicked and accordion toggle will close opened submenus automatically when another menu is opened.
  4. Mobile Responsive Breakpoint - This is a custom option of responsive breakpoint for only pre available template/skins. The default will always be 910px if left empty. Also for a custom template, you need to setup from its specific theme > edit page from Theme Settings page > Mobile Responsive Toggle Section.
  5. Toggle Menu Close Icon - Choose toggle close icon for responsive menu bar from the available close icon.
  6. Toggle Menu Open Icon - Choose toggle open icon for responsive menu bar from the available open icon.

B) For each menu item's mobile settings configuration:

Go to Appearances > Menus page > on left meta box section "Select WP Mega Menu Pro Settings" check individual Mobile Settings options for specific menu location. This includes -
  1. Enable Mega Menu on Mobile? - Check to enable the mega menu on the mobile version.
  2. Mobile Menu - Set different menu on mobile version.
  3. Disable Menu Toggle? - This option is simply used to hide menu toggle if you have 2 toggle icon displayed on the mobile version. One is from the theme side and another one is from our plugin side. Since, after activating mega menu feature on your default menu, it will completely override the menu to display as mega menu structure using our plugin. And our plugin generates its own mobile toggle functionalities which are why there appears 2 menu toggle button. In such cases, you need to hide one which is not functioning either using this option or if this option is still not working after enabling, then you need to inspect and use Custom CSS to hide the menu toggle shown by theme side.

Roles & Restriction Settings

You can find this functionality to specific menu items from Appearance > Menus > Hover over the menu item and click on blue "WP Mega Menu Pro" setting button and go to Other Settings Tab Section > Roles & Restriction Settings at last of the form where you can configure to show specific menu item to everyone, to hide for logged in users, hide for all logged our user, all users except admin or even configure to hide it for user groups or by role. All registered user roles are selectable.
  1.  If you want to hide menu items for example., Blog, click on hover blue button.
  2.  Go to Other Settings Tab > Roles and Restriction Settings section and configure which option do you prefer to hide the specific menu item individually.

Options Available are -

  1. Show To all
  2. Hide to all logged in users
  3. Hide to all logged out users
  4. All users except Administrator
  5. By Role - Multiple Selection Feasibility

Shortcode & Widget Information

1. Shortcode Tab Settings

To get every menu locations based shortcodes, Go to WP Mega Menu Pro > General Settings Page > Shortcodes Tab Section. In this settings tab, you can use the shortcode and display it on any page, post content editor or widgets section using Text Widget Or WP Mega Menu Pro Widget. You can also use the PHP function in your template files. In order to display the mega menu of specific menu location, firstly, you just need to enable WP Mega Menu Pro Settings for specific menu location from Appearances > Menus Page.

2. Widget Information

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 a 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 Plugin now provides different attractive, advanced and useful 13 pre available custom widgets such as WPMM PRO which are listed below:
  1. A) Widget Related with Posts Display:
    • WPMM PRO : Advanced Posts Slider Widget
    • WPMM PRO : Display Posts By Category
    • WPMM PRO : Gallery Shortcode Widget
    • WPMM PRO : Posts Format Widget
    • WPMM PRO : Recent Posts Widget
    • WPMM PRO : Posts Timeline
  2. B) Widget Related with Woocommerce Products Display:
    • WPMM PRO : Products Lists Widget
    • WPMM PRO : Recent Products Lists Widget
    • WPMM PRO : Woo Products Layout 2 Widget
  3. C) Extra Widget:
    • WPMM : Contact Info
    • WPMM PRO : Text Image Widget
    • WPMM PRO : Custom Image Widget
    • WPMM PRO : Featured Box Layout

Steps to add widget inside the mega menu:

  1. Choose Mega menu s submenu display mode for the specific top-level menu item in order to assign it mega menu functionalities. Then on the right side, click on a button "ADD WIDGETS" in order to add required pre available widgets, default WP widgets or WooCommerce widget if WooCommerce plugin is installed/activated on your site.
  2. A popup from the bottom will open with lists of all widgets as shown on below screenshot. Simply click on any widget that you want to add on mega menu section. The clicked widget will automatically be added on mega menu section and will be saved automatically.

WP Mega Menu Pro Provides 13 Pre available custom inbuilt widgets. Few are also used on our demo. Below are-

1) WPMM PRO : Advanced Posts Slider Widget :
You can create post featured image as slider and display on your mega menu. Select Category or terms to display featured image of specific post’s category. This widget even provides feature to show post name, post published date, set number of post’s feature image to display on slider , choose slider mode as horizontal,vertical or fade type, set speed and pause duration for slider as well as set auto slide tru or false as shown on below screenshot. WPMM PRO : Advanced Posts Slider Back-end Widget Options:
Front-end Display On Mega Menu Demo: You can find this widget display on our horizontal demo > “Blog” Menu item.
2) WPMM PRO : Display Posts By Category:
You can display posts of specific category on your mega menu as on our demo menu item “News”. Steps to configure Display Posts By category widget: 1) First of all, select category of which post you want to display on frontend,select template layout among 3 total inbuilt layout. Set post per page in number which means the number of posts you want to display in total.This plugin also provides option to enable featured image, show author name, category name,show excerpt, set excerpt length, show post published date, display posts by order ascending or descending. Also you can add button link with button name and set its target as well.
Screenshot of front-end widget display layout: You can find this widget demo display on our horizontal demo > “News” Menu item.
3) WPMM PRO : Gallery Shortcode Widget
You can display WordPress gallery using this widget. Steps to follow the process to display gallery are mentioned below: 1) Go to Admin add new posts. 2) Click on Add Media Button and then create gallery options tab on Insert Media popup form. 3) Then Choose multiple images and click on create a new gallery button below. 4) Click on Insert Gallery Button after all images have been selected as per requirement. 5) You will get the gallery short-code on editor area such as with selected images id. 6) Copy the shortcode and paste on widget’s gallery short-code textarea. You can follow below gif video tutorials in order to configure gallery shortcode steps: WP Mega Menu Pro Custom Widgets Settings Screenshot of front-end widget display layout. You can find this widget demo display on our horizontal demo > “Portfolio” Menu item.
4) WPMM PRO : Posts Format Widget
You can follow below screenshot steps in order to fill posts format display steps:
Screenshot of front-end widget display layout:
5) WPMM PRO : Recent Posts Widget
You can follow below gif video tutorials steps in order to display recent posts with 3 pre available layouts as shown on below video:
Screenshot of front-end widget display layout: WP Mega Menu Pro Custom Widgets Settings You can find this widget demo display on our horizontal demo > “Blog” Menu item: 2nd and 3rd widget section.
6) WPMM PRO : Posts Timeline:
You can follow below gif video tutorials steps in order to display posts with date in timeline format by order as shown on below video: WP Mega Menu Pro Custom Widgets Settings
7) WPMM PRO : Products Lists Widget
You can follow below gif video tutorials steps in order to display products lists category wise or display featured, on sale, latest products as shown on below video: WP Mega Menu Pro Custom Widgets Settings Screenshot of front-end widget display layout: You can find this widget demo display on our horizontal demo > “Products” Menu item: 1st top widget section.
8) WPMM PRO : Recent Products Lists Widget
You can follow below gif video tutorials steps in order to display recent products lists category wise or display featured, on sale, latest products as shown on below video with different unique layout: WP Mega Menu Pro Custom Widgets Settings
9) WPMM PRO : Woo Products Layout 2 Widget
You can follow below gif video tutorials steps in order to display woocommerce product lists with add to cart button as shown on below widget setup : WP Mega Menu Pro Custom Widgets Settings Screenshot of front-end widget display layout: You can find this widget demo display on our horizontal demo > “Shop” Menu item: 1st top widget section.
10) WPMM Pro : Contact Info You can follow below gif video tutorials steps in order to display contact details on your mega menu with this widget as shown on below video: WP Mega Menu Pro Custom Widgets Settings
11) WPMM PRO : Text Image Widget
You can follow below gif video tutorials steps in order to display text with image and button on your mega menu with this widget as shown on below video: WP Mega Menu Pro Custom Widgets Settings
12) WPMM PRO : Custom Image Widget
You can follow below gif video tutorials steps in order to display custom media image on your mega menu with this widget as shown on below video: WP Mega Menu Pro Custom Widgets Settings
13) WPMM PRO : Featured Box Layout
This widget simply have two layout type as horizontal or vertical to display featured item on mega menu section. You can follow below gif video tutorials steps in order to display featured box layout with your own custom item and font awesome class icon on your mega menu with this widget as shown on below video: WP Mega Menu Pro Custom Widgets Settings
Steps to add multiple featured box:
Frontend Display with Horizontal Featured Box Layout:
Frontend Display with Vertical Featured Box Layout:

Post/Page Content Settings

Our plugin even provides functionalities to display menu items as post, page, product to display its custom content such as post content, feature image or custom image link, show/hide read more button, show/hide excerpt, and its limit, show/hide category name, post published to date and author name as required on mega menu section only. Go to General Settings > Image Settings Tab Section.

Default Setup for Post/Page Image Configuration Options

Custom Content Configuration Options Individually:

Video Tutorials

Advanced Menu Items

WP Mega Menu Pro Plugin also provides an advanced feature to add tab layout inside the mega menu section. It includes 2 tabs layout i.e
  1. Horizontal Tabbed Mega Menu
  2. Vertical Tabbed Mega Menu
For both tab type, our plugin provides a common total of 5 pre available templates.
You can find this feature on Appearances > Menus Page > WPMM Pro Advanced Menu Items metabox.
Note: If the left meta box option "WPMM Pro Advanced Menu Items" is not displayed on your menu page then please follow below steps as shown on the screenshot.

Horizontal Tabbed Mega Menu

This is the first advanced Menu items feature to add horizontally tabbed inside the mega menu. There is altogether 5 total horizontal tab layout for mega menu.

5 Pre available Horizontal Tabbed Templates:

  1. Default Tab Design
  2. Simple Design Layout
  3. Animated Border Design
  4. Creative Tab Design
  5. Modern Tab Design

A) Steps to configure Horizontal Tab Layout Inside Mega Menu Section:

  1. Step # 1: Go to Appearances > Admin Menus page.
  2. Step #2 : Add top level menu on admin menu page.
  3. Step # 3: Secondly, in order to create a 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 submenus added such as Awards, News, Events, and Celebration. These third submenus will be working as your horizontal tabbed menu title button which on click will show the respective content of it.
  4. Step # 4: Add another submenu for created menu title. These submenu will be working as the content for specific sub menu items on click process. See Screenshot below.
  5. For flexibility, you can display custom image inside tab mega menu beside displaying sub menu item links. 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 submenu items as content display type.
  6. Then your final horizontal tab will be as shown in below screenshot.

Video Tutorials To Setup Horizontal Tabbed Mega Menu :

Vertical Tabbed Mega Menu

This is the second advanced Menu items feature to add vertically tabbed inside the mega menu. There is altogether 5 total vertical tab layout for mega menu.

5 Pre available Vertical Tabbed Templates:

  1. Default Tab Design
  2. Simple Design Layout
  3. Animated Border Design
  4. Creative Tab Design
  5. Modern Tab Design

A) Steps to configure Vertical Tab Layout Inside Mega Menu Section:

Vertical Tabs Block - A group of vertical tabs acts as a main vertical wrapper after top level menu item and do the same process in order to display vertical tab inside megamenu. Below is the screenshot on Advanced Menu Items Section > Vertical Tabs Block (A group of vertical tabs.)
  1. Step #1 : Go to Appearances > Admin Menus page.
  2. Step #2 : Add top level menu on admin menu page.
  3. Step #3 : Secondly, in order to create vertical tabbed mega menu, select Vertical Tabs Block - A group of vertical tabs.” and click on Add to Menu button. Then your vertical tabbed main wrapper will be added then keep it in order after the top level menu item for which you want to display tab inside mega menu.
  4. Here on our below screenshot, you can see there are 2 third sub menu such as Panel 1 and Panel 2 which works as your vertical tab main title button and on click this title tab, it will display its content i.e 4rd level menu items in respective order.
  5. For flexibility, you can even configure custom settings for Post/page type menu items inside vertical tab mega menu beside displaying sub menu item links. To display sub menu tabbed content as custom settings, then on hover specific menu items, select WP Mega Menu Pro blue 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.
  6. Then your final vertical tab will be as shown in below preview screenshot.

Video Tutorials To Setup Vertical Tabbed Mega Menu :

Tab Options

For horizontal and vertical tab block, you can configure templates among 5 pre available layouts and even select respective tab content's animation individually. Backend Setup:
Options Available are listed below :
  1. Choose Trigger Effect - Choose Tabbed Event as clicked or on hover effect.
  2. Choose Tab Layouts - Choose tab layout design. Selected design layout will work for both horizontal and vertical tab.
  3. Tabbed Content Animation - Choose specific animation type for this tabbed content.The default is set as FadeInDown. None will disable the animation.

FAQ

Will WP Mega Menu Pro work with my theme?
Yes, our plugin is fully compatible with all themes which have followed the wordpress theme development standards. But since our plugin completely overrides the theme's menu so in such cases, there might be few conflict with theme CSS and JS but with the help of Custom CSS and JS provided as an Option on Custom CSS tab section, you can easily override and resolve the conflict.
How do I use WP Mega Menu Pro plugin?
You just need to install and activate our plugin first on your site, setup default plugin's settings as per requirement. Then Go to Appearances > Menus page , add new menu if no any menu exist by default or else if if you have already created default menu then assign menu to any menu location at first, then check on left metabox section named "Select WP Mega Menu Pro Settings" section and enable mega menu and other common configuration. For each menu item's mega menu or flyout setting, simply hover over menu item where you can set flyout or mega menu, add widgets, sub menu items with drag and drop functionalities to order the mega menu content from backend. Similarly, you can also use generated shortcode as per menu locationand add it on any edit page, post, widget or php template pages respectively.
Can this plugin be used in multiple sites?
Yes, you can use this plugin in your individual projects but not allowed to sell it bundled with themes.
Does this plugin affect the site load?
No, It will not affect the loading of the site in anyways unless you use large images sizes on megamenu section.
Sticky menu not displayed on scroll to top?
In such cases, by default Sticky opacity is set to 0 then please do set it as 1 to display menu on page scroll as shown on below screenshot.
Do I have to pay extra for the further update of a plugin after purchase?
No, You don't have to pay you will get free updates of this plugin.
Do I have to have HTML and CSS Knowledge?
No you don't need to have knowledge of HTML and CSS unless if you want custom works other than using our pre designed templates or cusotm templates or if there is any conflict with theme CSS and JS then you might need few custom CSS in order to override and resolve the issue. For this, if you need any guidance or support then you can contact us anytime through below private contact form. Support
Can I use same mega menu with different layout for multiple menu location?
Yes, You can use same created mega menu for multiple menu location simply by assigning specific menu to multiple menu location and enable our plugin with different configuration setup.
How many Menu Item can be added?
Our plugin doesn't have any limitation for menu items. If a user tries to add more items than the server can handle, then the extra added menu items will be deleted automatically. Please note that this limit is not imposed, or caused by our plugin. This limit is caused by a server configuration issue. As a solution, if you have access to your php.ini, you can just add this directive (or change the value of the existing directive) to includes your max input variables:
max_input_vars = 3000;
If you don’t have access to this file (as with many shared hosts), you may need to contact your host to increase this limit.
Alternatively, you can try placing this in your .htaccess. This won’t work on some servers, so your mileage may vary.
php_value max_input_vars 3000
Menu Icons not being displayed?
If the assigned menu icon is not displayed on frontend of your site then you must have missed to enable "Show Menu Icon?"" option for each menu item. After setting the icon to each menu from Icon Settings , hover on specific menu item again and go to General Settings > Enable Show Menu Icon checkbox as shown on below screenshot.
How to switch a mega menu to a flyout menu on mobile version?
Currently, this feature is not possible using our plugin since there is no any built in option to do this since mega menu contains content such as widgets but flyout menu doesn't so it is not possible to switch this styles but if you want to achieve this somehow on your site then you can follow below steps:
  1. Step 1. Create 2 menu items with same name and its sub menu items and set one for mega menu type and another one for flyout menu type.
  2. Step 2. Go to Appearance > Menus, hover over the top level menu item (mega menu type),
    hover on WP Mega Menu Pro settings blue button and on General Settings > enable "Hide Menu On Mobile" option.
  3. Step 3. For Flyout menu item, hover over and click blue button and on General Settings > enable
    "Hide Menu on Desktop" option.
There are no changes to the desktop menu (we still see the mega menu). However, on mobile, we will see the new menu item as flyout sub menu and mega menu's type will be hidden as per setup.
Disable Mobile Toggle?
A common theme integration issue is seeing 2 mobile toggle buttons. As our plugin has its own menu toggle functionalities on mobile side so for independent menu display there won't be any problem for mobile version but if you have set mega menu enabled for default theme menu or primary menu then on mobile version, you might face issues such as showing double toggle menu button or on clicking theme menu toggle not opening menu items. Since our plugin will fully override the default theme menu, hence it will provide its own menu toggle bar feature. So, in such cases, you need to either disable theme menu toggle from theme options setup if the option is provided or else you can use Custom CSS in order to hide the theme toggle menu bar.
  1. Solution 1: Double Mobile Menu Toggle Button Solution On mobile verion, inspect and check the class or id of theme menu toggle div structure and with the help of Custom CSS, hide the theme provided menu toggle bar.
  2. Solution 2: Hide our plugin's provided menu toggle section. For this, please Go to Appearances > Menus Page, on left metabox settings "Select WP Mega Menu Pro Settings" > Mobile Settings, enable Disable Menu toggle checkbox in order to hide menu toggle displayed by our plugin and to use your menu toggle.

    Although we disable our plugin's toggle menu bar, on click theme menu toggle bar, the menu might not be opened since theme menu uses its own JS script which won't work for menu that is integrated by our plugin. For such case, we might require Custom JS in order to resolve the issue where we have to add custom js script on click theme menu toggle bar to open menu.

    Using Custom CSS: If on click theme menu toggle, if you can see any class generated or appended on ul or main div of the menu bar then you can add custom CSS to display menu or else you need to do it with the help of Custom JS/CSS of your own to make compatible with conflicted theme.For custom class appended by theme itself, example demo is shown below: In below video example, we are using blogger theme where by default the theme menu toggle on click add or append extra class named "menu-open" on "ul" structure of menu bar so we can use the specific ul main class and appended class by theme JS script to display our menu bar on mobile sidebar. Note: To add the Custom CSS for mobile on Custom CSS tab section, you must need to add media wrapper as per CSS rules which is missed on above video example as shown on below example:
    @media (max-width: 910px)  {
    	ul.wpmm-mega-wrapper.menu-open {
    	    display: block !important;
    	}
    }
    


    Using Custom JS: Lets assume if your theme doesn't provide any appended class on click theme's menu toggle bar. Then you can add your own custom JS as well as shown on below video tutorials to make compatible with Blogger theme. For blogger theme, you can copy the below Custom JS code in order to resolve toggle menu issue and you can change ul's id as per your theme menu location id being displayed on "ul" 's id menu bar respectively. On below the menu location was set to primary so ul's id was set as wpmega-menu-primary. For different menu location such as secondary, your ul list's id will be wpmega-menu-secondary.
    jQuery(function ($) { /* Add your custom javascript code here*/ 
      /* on click theme menu toggle open menu bar custom js here */
      $('.menu-toggle').click(function(){
         $(this).parent().find('#wpmega-menu-primary').slideToggle('slow'); /* show menu bar using ul list's id*/
      });
    
    });
    
Can I center my menu logo exactly in the middle of my menu?
Currently, we don't have direct feature option to display logo of menu on center of the menu bar but we can easily achieve this layout by dragging the menu item that was set as logo replacement type in middle of equal menu items on both left and right side. You can follow below video instruction for more clarification:
Menu link not working?
For this, please do enable "Active Menu Link" for each menu item. To enable this option, hover over specific menu item's blue button WP Mega Menu Pro and click on the button then Go to General Settings > Active Meu Link checkbox. You need to enable this option for each menu item individually.
The only plugin you’ll ever need to create an attractive mega menu for your WordPress website.
BUY NOW at $18.00