Magento 2 Mega Menu.
About MEGA MENU For Magento 2.
WeltPixel Mega Menu extension for Magento 2 helps merchants create a better look and professional Magento 2 navigation menu easily without technical skils. Categories can be presented in multiple formats in order to fit each category structure and provide a better navigation experience for the end user.
Customers will be able to navigate and explore your store easily.
Store owners have the possibility to select a custom menu view for each category in order to best highlight containing subcategories: Boxed, Sectioned, Full Width or Default magento view. In order to efficiently organise subcategories, columns width can be adjusted from admin options for each individual category. The numbers of columns in dropdown view is also configurable from admin options, offering the store owner possibility to organise the subcategory grid width.
Easy to set up without technical skills
WeltPixel Mega Menu comes not only with a nice design but also with powerful functionalities like the possibility to open menu links in new tabs, disable category links, or even overwrite category links with other internal or external links. This allows store owners to add in their Magento 2 Menu links to external pages like support platforms or other internal links like About us / Contact us pages.One click add custom content to Mega Menu
Mega Menu allows merchants to add custom CMS blocks or HTML content individually for each category sub-menu position Top, Bottom, Left or Right. You will be able to showcase new products, promotions, carousels, etc..
Features of the Extension.
- 4 display versions for each menu category: Full Width, Sectioned, Boxed, Default
- Configurable number of columns in dropdown menu
- Configurable columns width in dropdown menu
- Add Blocks or HTML content in Mega Menu Level 1 category - Top / Left / Right / Bottom CMS block
- Link categories, CMS pages, external URLs
- Open menu links in new tab
- Disable menu links
- Control visibility for mobile Link "ALL [category name]" at category level.
- Supports multiple stores and multiple languages
- Responsive design
- Light extension, optimised code.
- Easy to install, easy to upgrade
How to Install the Extension.
Before installing MegaMenu for Magento 2 store please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.3.0. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
Access the root of your magento 2 project from command line and run the following commands:
php bin/magento module:enable WeltPixel_Backend --clear-static-content
php bin/magento module:enable WeltPixel_NavigationLinks --clear-static-content
php bin/magento setup:upgrade
Flush any cache that you might still have enabled on your server or in Magento.
Woohoo, the extension is installed!
How to Upgrade the extension.
- Step 1. Remove extension code under app/code/WeltPixel/NavigationLinks before adding the new extension files. The extension may be refactored and old unused files may cause random issues so it's best to only keep the latest version of the files.
- Step 2. Follow normal installation instructions above.
HOW TO USE THE EXTENSION.
Step 1. Select Category
- Go to WeltPixel > Mega Menu Settings
- Mega Menu settings are specific to each level 1 category individually, allowing grandular control over the menu design and functionality based on each category.
Step 2. Configure menu
- Go to Categories (only Level 1) > WeltPixel Mega Menu
You will be able to configure a different display mode for each category:
- Menu display mode for each level 1 category: Width / Sectioned / Boxed / Default Magento
- Number of columns in submenu for each level 1 category
- Width of the submenu columns, allowed value is auto (E.g. "auto"). Note: please take into consideration the left or right blocks because these blocks will generate one extra column each.
Step 3. Category LinksGo to Products > Categories (any level) > WeltPixel Options
- Link - if necessary you can set a custom link for any category in the menu, including external links.
- Open in new tab - opens the custom link/category page in new tab
If you are using the option to add custom links in the Mega Menu we recommend to also use Google XML Sitemap Extension and exclude categories from sitemap that are only used for menu links and are not real categories. Applicability: You may want to add a category that links to an external website, directly to a product page, etc..
Step 4 - Mobile Menu Breakpoint
- Go to WeltPixel > Mega Menu Settings > General Settings
- Mobile Menu Breakpoint - Insert the breakpoint when navigation menu changes to mobile look and behavior (value in pixels). Ex. 1050.
Note on applicability:
Case 1: You may need the mobile menu to kick in at a higher resolution than default magento 768px. There are mobile devices and small laptops with resolution between 800-1200px where your desktop menu may look crowded on small devices. By setting a higher breakpoint for mobile menu you will be able cover this cases elegantly.
Case 2: Some website designs use mobile menu for both mobile and desktop. You will be able to achieve this easily by setting a breakpoint that will never be reached by your users ex 8000[px], so mobile menu will show permanently.
What’s new in v.1.8.0 - December 8, 2018
- Improved column width calculation algortihm.
- Fixed an issue where full path breadcrumbs were not showing on Category Page.
- Compatibility adjustments for Magento 2.1.16/2.2.7/2.3.0.
- PHP 7.2 compatibility added.
- As Magento 2.3 comes with major core changes, we have provided a different set of files in order to achieve the best performance on each version.
What’s new in v.1.7.5 - October 24, 2018
- Added functionality to add CMS blocks in sub-menu Top / Bottom / Left / Right.
- Added option to hide "ALL [Category Name]" link from mobile menu.
- Mega Menu - added large touch devices compatibility when desktop menu is being used on touch devices, enhancement to native Menu functionality.
- Fixed drag and drop action that opened mobile navigation on desktop.
- Fixed menu scramble on left side in some isolated cases due to JS file loading order.
- Fixed some isolated cases when menu was not showing on iphone due to JS file loading order.
- Mega Menu HTML validation fixes.
- Admin options dependancy improvements, only active options are now showing based on option selections.
- Remove pointer events for menu categories without link, now pointer only shows for categories with link assigned.
- Small css adjsutments, paddings, margins.
- Improved documentation.
- Added detailed error messages for invalid licenses for an easier identification of the cause.
- License improvements, added *.magento.cloud as a valid test domain for Enterprise Cloud environments. Now both ‘magentosite.cloud’ and ‘magneto.cloud’ can be used for testing purpose with the production domain license.
What’s new in v.1.7.4 - September 25, 2018
- Remove old unused navigation_mobile.less.
- Added new option to enable/disable MegaMenu - store-view / multi-theme compatibility.
- Design compatibility with Magento 2.2.6 - removed arrows introduced in Magento 2.2.6.
- Admin menu styling to fit screen size 1366px.
- Fix for production mode with merged JS - missing color pallet display now fixed.
What’s new in v.1.7.3 - August 23, 2018
- License improvements, adding *.magento.cloud as a valid test domain.
What’s new in v.1.7.2 - August 2, 2018
- Fixed missing breadcrumbs on Product page for Magento 2.2.5 and greater.
- Added additional validations for MegaMenu options.
- Fixed admin random logout issue.
- Licensing improvements, allowing 3 letter domain as valid domain.
What’s new in v.1.7.1 - July 12, 2018
- Design adjustments for mobile MegaMenu on iOS devices, fixing issues introduced in version 1.7.0
- Compatibility with Magento 2.2.5 both Open Source & Commerce Cloud B2B.
- Added domain.test & [any_subdomain].domain.test to the list of valid urls for staging/development environments. Added domain validation with port number included for licensing purpose.
- Added licensing compatibility with Magento B2B.
What’s new in v.1.7.0 - July 5, 2018
- Removed extra declaration, compilation error issue on Magento 2.1.x.
- Added option to enable/disable WeltPixel admin notifications.
- Show store and server related information under debugging tab: Magento Mode, Magento Edition, Server User, Magento Installation Path, Current server time, Latest cron jobs.
- Added licensing, license key needs to be generated under weltpixel.com account for purchased product, based on domain name and added under your magento installation.
What’s new in v.1.6.4 - May 16, 2018
- Added Mobile Menu configurable breakpoint, ability to set the screen resolution where mobile menu kicks in. Allows to use mobile menu also in medium size resolutions like tablets or small laptops where desktop navigation is too long.
- Compatibility with Magento 2.2.4, logger broken reference fix, changed to rewrite from plugin.
What’s new in v.1.6.3 - April 11, 2018
- Full Width menu now becomes full screen.
- Design improvements for both desktop and mobile mega menu.
- Added compatibility with Php 7.2.
What’s new in v.1.6.0 - March 1st, 2018
- Compatibility with Magento 2.2.x header and Pearl Theme Headers.
- Added Backend dependancy.
What’s new in v.1.5.8 - January 12, 2018
- Added version control for installed WeltPixel modules, including latest version check.
What’s new in v.1.5.7 - December 14, 2017
- Added Support Center functionality in Magento Admin.
- Added Debugger functionality, checks for rewrites and points potential issues.
- Adding https support for old magento versions in custom URL menu link.
Fixing Internet Explorer full width menu issue.
What’s new in v.1.5.5 - October 20, 2017
- Fixed inconsistent borders of active/inactive sections of mobile menu.
- Menu item mouse over movement fix.
Fixed border line of first active element of Mega Menu.
What’s new in v.1.5.3 - September 20, 2017
- Fixed left border on active category.
- Fixed active link for menu items containing custom links.
Fixed misaligned subcategories for sectioned menu.
What’s new in v.1.0.1 - Jul 26, 2017
- Fixed Mega Menu white font on white submenus background
- Fixed Mega Menu colored background on mobile menu navigation
- Fixed Mega Menu submenu links misalignment for boxed display mode
What’s new in v.1.0.0 - June 16, 2017
- Initial release