1) Installation

Dashboard ► Plugins ► Add New ► Upload

2) Set Menu Structure for Defined Location

Dashboard ► Appearance ► Menus ► Edit Menus

3) Activate

Dashboard ► Mega Main Menu ► General

4) Add and Set Up Menu Items

Dashboard ► Appearance ► Menus ► Edit Menus

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

Dashboard ► Mega Main Menu ► General

Logo Settings

Dashboard ► Mega Main Menu ► General

Layout Options

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

Dashboard ► 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:

1. Background Gradient (Color) of the Primary Container.

2. The background image of the initial container.

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.

3. Font for the first level items.

4. The size of icons in first level items.

5. Text Color of the First Level Item.

6. Text Color of the Active First Level Item.

7. Gradient (Color) of the background for the active first level item.

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

8. Background Gradient (Color) of the Dropdown elements.

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

9. Font of the dropdown menu item.

10. Text color of the dropdown menu item.

11. Background Gradient (Color) of the dropdown menu item.

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

12. Border color between dropdown menu items.

13. Text color of the dropdown active menu item.

14. Background Gradient (Color) of the dropdown active menu item.

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 ► Mega Main Menu ► Skins

Set Of Installed Fonts

Select the fonts that must 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 these styles for menu item in "Menus -> Your Menu Item -> 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 ► 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.

Prioritize plugin 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 for this item.

3. 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.

4. Disable Link of This Item.

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.

Settings of dropdown menus

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. All examples here - http://menu.megamain.com/wp-content/plugins/demo_dashboard_2.html.

1. Submenu Type.

2. Side for dropdown elements.

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.

3. Number of columns.

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

4. Enable the full width for the sub-menu.

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

5. Dropdown Background Image.

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 Step. Required to generate a cache file with your settings.);
4. Clear cache of the browser (Ctrl + Shift + R few times on the home page);
5. All done.

My menu structure loses some items (or options) when I save the settings.

Cause of this problem is small value of the "max_input_vars" option in the configuration of your server (host). You should increase value of the "max_input_vars". You need to set larger value. You can check current value of "max_input_vars" on your site on Mega Main Menu configuration page. Go to "Mega Main Menu -> Specific Options -> max_input_vars". This is real value of "max_input_vars" option in the configuration of your server. You can try to increase it in one of ways that are described in Documentation.

• Most hosts have the opportunity to change this value in the "Host Admin Area".
  Example:
  If currently you have max_input_vars = 1000
  You need to set max_input_vars = 9000
  
  
• You can try to change this value using ".htaccess" file in root directory of the your site. Add following lines of the code at the end of ".htaccess" file:

  php_value max_input_vars 9000
  php_value suhosin.post.max_vars 9000
  php_value suhosin.request.max_vars 9000

  
  
• You can try to change this value using "php.ini". Try to find "max_input_vars" and change value for this variable. If line of the code in your "php.ini" look like this:

  ; max_input_vars = 1000

  Then change it to following:

  max_input_vars = 9000

  
  
• If that does not help you, ask your host support "How can I increase the value of the max_input_vars for my site?".
  
  
• Also you can deactivate the options that you do not use to customize the menu structure. It helps reduce the number of options and reduce the load on the server. Example:
  - If you do not use option "Icon Of The Item" - disable it globally in the "Settings of the structure -> Icon Of The Item -> Disable".
  - If you do not use option "Description Of The Item" - disable it globally in the "Settings of the structure -> Description Of The Item -> Disable".
  
  The most unused options, you can try to disable them:
  - Description Of The Item.
  - Style Of The Item.
  - Visibility Control.
  - Dropdown Background Image.

My menu is displayed incorrectly in IE9 (or older)

• IE9 and older not supported Alpha colors.
  In order to fix it, use HEX "#2a6496" instead RGBA "rgba(42,100,150,1)".
  
  
• IE9 and older not fully supported Gradients.
  In order to fix it, use flat colors (#2a6496 > #2a6496) instead gradients (#428bca > #2a6496).
  
  
• Our plugin supports IE8, but only in safe mode, it means that all navigation functions is available but without 100% design matching. MicroSoft officialy stopped support of IE8 in April 2014 - http://www.microsoft.com/en-us/windows/enterprise/end-of-support.aspx. If the MicroSoft stopped supporting their product, all other programmers can also stop supporting it.

"Sticky" feature does not work on mobile devices.

"Sticky" feature does not work on mobile devices, because if you open the menu, you can not click on the last item, it will always be outside the screen.

If you understand that use sticky menu on mobile devices is bad practice, but you still want it - use this code in "Custom CSS" field.

.mega_main_menu.direction-horizontal > .menu_holder.sticky_container { position: fixed; top: 0px; left: 0px; width: 100%; border-radius: 0px; z-index: 2000; line-height: 0px; text-align: center; } .mega_main_menu.direction-horizontal > .menu_holder.sticky_container > .menu_inner { display: inline-block; } .mega_main_menu.direction-horizontal.include-logo > .menu_holder.sticky_container > .menu_inner > .nav_logo, .mega_main_menu.direction-horizontal > .menu_holder.sticky_container > .menu_inner > .mega_main_menu_ul { vertical-align: top; }

Display Logo Only When Menu is "Sticky"

.mmm .mega_main_menu .nav_logo { display: none !important; } .mmm .mega_main_menu .sticky_container .nav_logo { display: block !important; }

Different Color for Every Button

Multilingual Mega Menu (WPML guide)

Search Box - Static instead Animated.

Add this code in the "Specific Options -> Custom CSS" field, to get static search box instead animated:

.mmm .mega_main_menu li.nav_search_box { width: auto !important; } .mmm .mega_main_menu li.nav_search_box .mega_main_menu_searchform { position: relative !important; right: 0px !important; display: block !important; } .mmm .mega_main_menu li.nav_search_box .mega_main_menu_searchform .field { width: 160px !important; max-width 160px !important; padding-left: 8px !important; cursor: text; }

Remove Dropdown Arrows

Add this code in the "Specific Options -> Custom CSS" field.

/* for 1-st levels */ .mega_main_menu > .menu_holder > .menu_inner > ul > li > .item_link:after { content: none !important; } /* for 2-nd and other levels */ .mega_main_menu li.tabs_dropdown > .mega_dropdown > li > .item_link:before, .mega_main_menu li.default_dropdown > .mega_dropdown > .menu-item > .item_link:before { content: none !important; }

Custom CSS to correct menu layout in "Avada".

1. First of all you need activate following option "Specific Options -> Prioritize Plugin Styles".
2. Add following code in the "Mega Main Menu -> Specific Options -> Custom CSS" area.

/* Fix menu layout and stretch to the full width */ #nav { float: none !important; } .mega_main_menu > .menu_holder > .menu_inner > ul { width: auto !important; } #snav > .mega_main_menu, #nav > #nav > .mega_main_menu, #small-nav #mobile-nav, .mmm header .fusion-main-menu { display: block !important; float: none !important; } .mmm header .fusion-main-menu { float: none !important; overflow: visible !important; } .mmm header .fusion-header { height: auto !important; padding-top: 0px !important; padding-bottom: 0px !important; } /* remove unnecessary borders */ #wrapper .mega_main_menu > .menu_holder > .menu_inner > ul > li > .item_link, #wrapper .mega_main_menu > .menu_holder > .menu_inner > ul > li.multicolumn_dropdown .mega_dropdown > li > .item_link { border: 0px none !important; } /* fix background color for menu item on hover */ [class*="mega_main_menu"] #wrapper #nav ul li ul li a:hover { background-color: transparent !important; } /* fix background color for MMM searchbox */ .mega_main_menu > .menu_holder > .menu_inner > ul > li.nav_search_box .mega_main_menu_searchform .field { background-color: transparent !important; float: none !important; border: 0px none !important; margin: 0px !important; min-width: auto !important; } /* hide all unnecessary elements */ .mmm header .fusion-mobile-menu-icons, .mmm header .fusion-main-menu.fusion-sticky-menu, .mmm .mega_main_menu[class*="first-lvl-align-"] > .menu_holder > .menu_inner > ul > li.fusion-menu-cart, .mmm .fusion-logo, #snav > *, #nav > #nav > *, #small-nav .mobile-selector, .mega_main_menu .fusion-main-menu-search, .mmm header .fusion-mobile-nav-holder { display: none !important; }

Custom CSS to correct menu layout in "X" Theme.

Add this code in the "Mega Main Menu -> Specific Options -> Custom CSS" area.

/* Hide logo of the theme */ .x-navbar .x-brand, .x-btn-navbar, .x-btn-navbar.collapsed { display: none !important; } /* Fix for mobile menu */ .x-nav-collapse, .x-nav-collapse.collapse { height: auto !important; } .x-navbar-inner { min-height: 0px !important; }

Custom CSS to correct menu layout in "Enfold".

Add this code in the "Mega Main Menu -> Specific Options -> Custom CSS" area.

/* Stretch menu to theme layout container */ #header_main nav { position: static !important; display: block !important; } /* Hide unnecessary elements */ #header_main .logo, .mega_main_menu .menu-item-search-dropdown, #advanced_menu_toggle, #advanced_menu_hide { display: none !important; } /* Auto height of the header */ #header_main .container { height: auto !important; line-height: 1 !important; }

Custom CSS to correct menu layout in "Jupiter".

Add this code in the "Mega Main Menu -> Specific Options -> Custom CSS" area.

.mmm .mk-header-nav-container { display: block !important; } .mmm .mk-toolbar-resposnive-icon { display: none !important; }

Custom CSS to correct menu layout in "Divi".

Add this code in the "Mega Main Menu -> Specific Options -> Custom CSS" area.

.mmm #top-menu-nav { display: block !important; } .mmm #et_top_search, .mmm #et_mobile_nav_menu { display: none !important; } .mmm #et-top-navigation { float: none !important; padding: 0px !important; } .mmm #et-top-navigation #top-menu-nav { float: none !important; }

Custom CSS to correct menu layout in "Salient".

1. First of all you need activate following option "Specific Options -> Prioritize Plugin Styles".
2. Add following code in the "Mega Main Menu -> Specific Options -> Custom CSS" area.

/* Hide logo of the theme */ .mmm header#top > div > div > .col.span_3 { display: none !important; } /* Hide ".buttons" element before the menu */ .mmm header#top > div > div > .col.span_9 nav .buttons { display: none !important; } /* Hide Theme's mobile menu hamburger button */ .mmm header#top > div > div > .col.span_9 > .mobile-icon { display: none !important; } /* Expand the container of the menu to full width */ .mmm header#top > div > div > .col.span_9, .mmm header#top > div > div > .col.span_9 .sf-menu { width: 100% !important; float: none !important; } body.mmm header#top nav .sf-menu ul li.sfHover > a { background: transparent !important; } /* Make MMM visible on Mobile */ .mmm #header-outer header#top > div > div > .col.span_9 nav { display: block !important; } /* Fix the logo width in case if logo source is SVG file */ @media (min-width: 768px) { .mega_main_menu .logo_link img[src*=".svg"] { width: 300px; } }

Custom CSS to correct menu layout in "TwentySixteen".

Add this code in the "Mega Main Menu -> Specific Options -> Custom CSS" area.

/* stretch menu to full wide */ .mmm .site-header-menu { display: block !important; width: 100% !important; } /* hide unnecessary menu button */ .mmm .menu-toggle { display: none !important; } /* hide site logo */ .mmm .site-branding { display: none !important; }

mmm_set_configuration - to set custom configuration of the plugin using your theme functions.

add_filter( 'mmm_set_configuration', 'my_function_to_set_mmm_configuration' );

function my_function_to_set_mmm_configuration ( $default_configuration ) {

	// Get configuration of the plugin that is stored in the DataBase.
	$saved_configuration = get_option( 'mega_main_menu_options', array() );

	if ( ( $saved_configuration === false ) || empty( $saved_configuration ) ) { // If you do not have a saved configuration in the database - do your code.

		$theme_custom_configuration = $default_configuration;

		$menu_location_name = 'primary-menu'; // name of menu location of your theme.

		// FEW EXAMPLES

		// Format of the checkbox option
		$theme_custom_configuration[ 'mega_menu_locations' ] = array( $menu_location_name );
		$theme_custom_configuration[ 'responsive_styles' ] = array( 'true' );
		$theme_custom_configuration[ $menu_location_name . '_sticky_offset' ] = array( 1 );
		$theme_custom_configuration[ $menu_location_name . '_first_level_item_height_sticky' ] = array( 80 );
		$theme_custom_configuration[ $menu_location_name . '_mobile_label' ] = array( 'MENU' );
		$theme_custom_configuration[ $menu_location_name . '_first_level_separator' ] = array( 'none' );

		// Format of the input_text, textarea, radio option
		$theme_custom_configuration[ 'custom_css' ] = '.theme_custom_class .mega_main_menu { margin: 10px; }';
		$theme_custom_configuration[ 'logo_src' ] = 'http://menu.megamain.com/wp-content/plugins/mega_main_menu/src/img/megamain-logo-120x120.png';

		// Format of the group of the inputs (menu_bg_gradient)
		$theme_custom_configuration[ $menu_location_name . '_menu_bg_gradient' ] = array( 'color1' => '#FFF', 'color2' => '#FFF', 'start' => '0', 'end' => '100', 'orientation' => 'top' ); 
		$theme_custom_configuration[ $menu_location_name . '_menu_first_level_link_font' ] = array( 'font_family' => 'Inherit', 'font_size' => '13', 'font_weight' => '400' );
		$theme_custom_configuration[ $menu_location_name . '_menu_first_level_link_color' ] = '#666666'; 
		$theme_custom_configuration[ $menu_location_name . '_menu_first_level_icon_font' ] = array( 'font_size' => '13');
		$theme_custom_configuration[ $menu_location_name . '_menu_first_level_link_bg' ] = array( 'color1' => '#FFF', 'color2' => '#FFF', 'start' => '0', 'end' => '100', 'orientation' => 'top' );
		$theme_custom_configuration[ $menu_location_name . '_menu_first_level_link_color_hover' ] = '#bfd80f';
		$theme_custom_configuration[ $menu_location_name . '_menu_first_level_link_bg_hover' ] = array( 'color1' => '#bfd80f', 'color2' => '#FFF', 'start' => '2', 'end' => '0', 'orientation' => 'top' );
		$theme_custom_configuration[ $menu_location_name . '_menu_search_bg' ] = array( '#bfd80f' );
		$theme_custom_configuration[ $menu_location_name . '_menu_search_color' ] = '#f8f8f8';
		$theme_custom_configuration[ $menu_location_name . '_menu_dropdown_wrapper_gradient' ] = array( 'color1' => '#ffffff', 'color2' => '#ffffff', 'start' => '0', 'end' => '100', 'orientation' => 'top' ); 
		$theme_custom_configuration[ $menu_location_name . '_menu_dropdown_link_font' ] = array( 'font_family' => 'Inherit', 'font_size' => '13', 'font_weight' => '300' );
		$theme_custom_configuration[ $menu_location_name . '_menu_dropdown_link_color' ] = '#666666';
		$theme_custom_configuration[ $menu_location_name . '_menu_dropdown_icon_font' ] = array( 'font_size' => '13');
		$theme_custom_configuration[ $menu_location_name . '_menu_dropdown_link_bg' ] = array( 'color1' => 'rgba(255,255,255,0)', 'color2' => 'rgba(255,255,255,0)', 'start' => '0', 'end' => '100', 'orientation' => 'top' ); 
		$theme_custom_configuration[ $menu_location_name . '_menu_dropdown_plain_text_color' ] = '#666666';

/*
		// You can print $default_configuration to see full list of options (only in dashboard)
		print_r( $default_configuration );		
*/

		add_option( 'mega_main_menu_options', $theme_custom_configuration );
	} else { // If you have configuration stored in the DataBase - do nothing.
		return false;
	}

}

Result in the "DataBase"

wp_options -> option_name = mega_main_menu_options

mmm_skin_extend - to add few custom CSS rules which user can not to change.

add_filter( 'mmm_skin_extend', 'my_function_to_extend_css' );

function my_function_to_extend_css ( ) {
	$my_css_rules = '.theme_custom_class .mega_main_menu { margin: 10px; }';
	return $my_css_rules;
}

Result (at the end of the file: /plugins/mega_main_menu/src/css/cache.skin.css)

	...	
	...
	...
	.theme_custom_class .mega_main_menu { margin: 10px; }

mmm_container_class - to add extra CSS classes in the "Mega Main Menu" initial container.

add_filter( 'mmm_container_class', 'my_function_to_add_classes_in_container' );

function my_function_to_add_classes_in_container ( $default_classes ) {
	/*

	// You can print $default_classes to see full list of CSS classes of the initial container
	print_r( $default_classes );

	*/

	// Example
	$my_css_classes = '';
	$my_some_variable = 1;
	if ( $my_some_variable == 1 ) {
		$my_css_classes .= 'my_extra_class';
	}
	return $my_css_classes;
}

Result

<div id="mega_main_menu" class="primary primary_style-flat ... my_extra_class">
	...
		...
	...
</div>

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