Mega Main Menu

We thank you for purchasing our product. Hope our product will be of great help for you to succeed. We appreciate your decision to read the manual before request for our support.

Project Mega Main Menu
Created 10 November 2013 at 12:00 GMT
Author MegaMain
Author URI megamain.com
Support support.megamain.com

1) Instal

Dashboard ► Plugins ► Add New ► Upload

Follow the next steps to setup plugin:

  1. Extract file "mega_main_menu.zip" from the general archive to your computer;
  2. Log in dashboard of your WordPress;
  3. Next follow the way "Plugins ► Add New ► Upload";
  4. In the file selection field you should choose "mega_main_menu.zip" stored in your computer, and click the button "Install Now";
  5. Don't forget to activate plugin.

If you followed all instructions correctly, the link "Mega Main Menu" should be added in the section "Appearance".

2) Set Menu Structure for Defined Location

Dashboard ► Appearance ► Menus ► Edit Menus

If in your WP there is not yet created "Menu Structure" or you want to create a new Menu Structure for using it with "Mega Main Menu Plugin" – follow the next steps:

  1. Click the link "create a new menu";
  2. Type a new title for your menu (Example: "My Mega Menu");
  3. Click the button "Create Menu".

Dashboard ► Appearance ► Menus ► Manage Locations

If you already have the created "Menu Structure" - set the necessary Menu Structure for the definite location.

Example: Select "My Mega Menu" for "primary_menu" theme location.

3) Activate

Dashboard ► Appearance ► Mega Main Menu ► General

Mega Main Menu and its settings will be displayed in selected locations only after the activation of this location. Check the location(s) where you want to display Mega Main Menu.

Example: If you want to use "Mega Main Menu Plugin" in "primary_menu" location - check this location

4) Add and Set Up Menu Items

Dashboard ► Appearance ► Menus ► Edit Menus

Follow the next steps for set up menu item:

  1. In the section "Pages" (or Links, or Categories) tick the page for which you want to create an item of menu and click the button "Add to menu" (your selected item of menu will be added in the section "Menu Structure").
  2. Click the caret (arrow down) next to the title of added item of menu, all settings of this menu item will be unfolded.
  3. Customize this menu item according to your requirements.
         Example:
    • Select icon;
    • Select "Submenu type" on "Multicolumn Dropdown";
    • Set "Submenu Columns" on "3";
    • Check "Enable Full Width Dropdown"
  4. Save the changes in Menu Structure ("Save Menu" button).

Activation of the Mega Menu for the definite location of the theme

Dashboard ► Appearance ► Mega Main Menu ► General

Mega Main Menu and its settings will be displayed in selected locations only after the activation of this location. Check the location(s) where you want to display Mega Main Menu.

Logo Settings

Dashboard ► Appearance ► Mega Main Menu ► General

Here you can select the image-file for using it as a logo in the Menu and set its size. Select image to be used as logo in Main Mega Menu. It's recommended to use image with transparent background (.PNG) and sizes from 200 to 800 px. Then set height of the logo. You can set height of the logo in percentage to the height of the initial container (applicable values from 10 to 99 percent). Width of the logo is set up automatically to save proportions of the original logo image.

You can find instructions how to add selected logo to the definite menu in "Layout Options: location ".

Layout Options

Dashboard ► Appearance ► Mega Main Menu ► General ► Layout Options: location

Firstly, you should decide for which menu location layout should be set.

In "Layout Options: Location " you can:

  • Add to the primary menu container: logo and (or) search.
  • Set height for the initial menu container and items of the first level.
  • Choose how to locate menu elements of the first level.
  • Choose where to locate icon for first level items.
  • Select type of separator between the first level items of this menu.
  • Set the value of corners radius.
  • Activate Menu Minimization on Handheld Devices.
  • Choose Menu Direction (Horizontal, Vertical).
  • Enable sticky menu.
  • Set sticky scroll offset.

Dashboard ► Appearance ► Mega Main Menu ► Skins ► Skin Options: location

Firstly, you should decide for which menu location skin should be set.

In "Skin Options: location " you can change:

If you want to use gradient follow the next steps:

  1. Select the initial color of the gradient.
  2. Select the final color of the gradient.
  3. Set the starting and ending points of the transition color range from the first into the second color of the gradient.
  4. Choose the direction of the gradient (Vertical, Horizontal or Radial).
  5. Click the button "Click Here To View Result" to check how this gradient will be displayed.

If you want to use flat color - set the same color value for the first and second parameters.

If you want to set the background image for menu initial container - use the following option.

You can choose and tune the background image for the primary container.

Notice: the background image replaces the background gradient and only flat color stays for the background.

The process of setting up the gradient or color for this element is the same as for "Background Gradient (Color) of the Primary Container".

The process of setting up the gradient or color for this element is the same as for "Background Gradient (Color) of the Primary Container".

The process of setting up the gradient or color for this element is the same as for "Background Gradient (Color) of the Primary Container".

The process of setting up the gradient or color for this element is the same as for "Background Gradient (Color) of the Primary Container".

Dashboard ► Appearance ► Mega Main Menu ► Skins

Set Of Installed Fonts

Select the fonts to be included on the site. Remember that a lot of fonts affect on the speed of load page. Always remove unnecessary fonts.

Additional Styles (Different Colors for Each Menu Items)

Here you can add and edit highlighting styles. After that you can select this styles for menu item in "Style of This Item" option.

Custom Icons

You can add custom raster icons. After saving these settings, icons will become available in a modal window of icons selection. Recommended size 64x64 pixels.

Dashboard ► Appearance ► Mega Main Menu ► Specific Options

Custom CSS

This field is needed in the case when your template has a particular menu location and it needs adjustment. You can place here any necessary custom CSS properties.

Responsive for Handheld Devices

If this option is enabled, then the menu will be transformed, if the user uses the handheld device.

Coercive Styles

This option is recommended to use only if styles of the installed theme interfere with the proper display of Mega Main Menu. If this option is checked - all CSS properties for this plugin will have "!important" priority.

"Indefinite Location" Mode

If this option is checked - all menus will be replaced by the mega menu. This will be useful for templates in which are not defined locations of the menu.

Dashboard ► Appearance ► Menus

Toggle the item of menu which you want to set.

Definite Item Settings

1. Standard WordPress settings of the menu item.

We will leave out the explanation associated with standard WordPress settings of the menu item as they are very simple and understandable. We will consider opportunities of the Mega Main Menu instead.

2. icon of the current menu item.

To select the icon of the menu item follow the next steps:

  1. Click the button "Show Icons".
  2. In the modal window that appears, click the icon that you prefer.
  3. Click the button "OK" in the upper right corner of the modal window (if you click outside the modal window - icon selection will be canceled and the modal window will be closed).

Notice: the plugin includes a set of more than 1600 vector icons, so loading a modal window can take some of your time and patience.

3. Hide Icon of This Item.

Use this option if you want to display the menu item without an icon.

4. Hide Text of This Item.

Use this option if you want to display the menu item without a text. For example, link to the home page can be displayed without a text, and only the "Home" icon can be left.

Use this option if you want to set up the menu item without an active hyperlink. For example: it can be the title for the column in multicolumn dropdown menu.

Notice: these settings can be adjusted only for the first level items of the menu, and the style of displaying all children dropdown elements will depend on these settings.

1. Submenu Type.

  • Standard Dropdown. Use this type to display usual dropdown menu as one column.
  • Multicolumn Dropdown. Use this type to display dropdown menu with several columns. Number of columns depends on the option "Number of Columns".
  • Grid Dropdown. Use this type to display dropdown menu in the form of a grid. Number of elements placed in one line depends on the option "Number of Columns".
  • Posts Grid Dropdown. Use this type to display dropdown menu in the form of a grid using recently added posts. Number of elements placed in one line depends on the option "Number of Columns". Thumbnail picture and icon for each post are selected on the page of editing this post (Look for "Featured image" and "Post Icon" Metaboxes).
  • Widgets Dropdown. Use this type to display dropdown menu with Widgets. Select number of columns with the help of the option "Number of Columns". Using this type you can add and edit widgets in the usual place (on page Dashboard ► Appearance ► Widgets).

Just choose the side to which dropdown elements will unfold. For example: if you set "Drop To Right Side" for this option then dropdown will start at the left side of the initial element and go beyond it to the right.

This option influences the number of elements in one line for "Grid Dropdowns", the number of columns in the "Multicolumn Dropdown" and "Widgets Dropdown".

If you check this option the dropdown menu will be stretched to the full width of the primary container.

Use this area to select and set parameters of the background image for the dropdown item.

Follow the next steps to update (reinstall) plugin, all these steps are important for the correct working of the plugin:

  1. Deactivate and remove the old version (all settings will be saved);
  2. Install the new version;
  3. Go to "Mega Main Menu settings" page and save settings again (*important);
  4. Clear cache of the your browser;
  5. All done.

If you need support, if you have a question or suggestion - leave a message on our support page Support.MegaMain.com.