Mega Menu Magento 2 Extension
ABOUT THE MAGENTO 2 MEGA MENU EXTENSION.
WeltPixel’s Mega Menu Extension helps merchants create a clean, professional Magento 2 navigation menu. No technical skills needed! Show categories in multiple formats in order to fit each category structure and provide a better navigation experience.
This menu extension will let customers navigate and explore your store easily.
Store owners can assign a custom menu view for each individual category. This allows full control on how to highlight the subcategories and featured products within. You can choose from: Boxed, Sectioned, Full Width, or Default Magento view. From within Admin you can set many custom options to efficiently organize your subcategories. Column width can be adjusted for each individual category and so can the number of columns in a dropdown menu. You know how your customers want to see products, now your menu styles can keep up with your vision!
Improve your menu layout today. The Magento Mega Menu responsive Extension is easy to set up - without technical skills!
Sure WeltPixel’s Mega Menu includes a great design - but that’s not all. It has powerful functionalities such as: the ability to open menu links in new tabs, disable category links, and even overwrite category links with other internal or external links. Store owners can now add Magento 2 menu links to external pages such as support platforms. Menu links can also be added to internal pages like the “About Us” or “Contact Us.”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. This includes; Top, Bottom, Left or Right. You will be able to showcase new products, promotions, carousels, and more!
FEATURES OF THE MAGENTO 2 MEGA MENU 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
- Configurable subcategory distribution in each column
- Custom font colors for any category or subcategory
- Add Blocks or HTML content in Mega Menu Level 1 category - Top / Left / Right / Bottom CMS block (Desktop only)
- Create Block or HTML content-only Level 1 categories (no need for subcategories) to showcase products, promotions or other content
- Add custom Labels to the Mega Menu to showcase promos and discounts for specific categories
- Fully customizable with improved design options for elements such as Backgroud Color, Font Size, Hover Color, Hover Effect, Text Transform and Paddings (Desktop Only)
- Background Overlay allows for bringing the Menu into focus (Desktop only)
- Color Contunuity for Level 1 Categories allows Menu Items to inherit dropdown background color for better design integration (Desktop only)
- 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
1 MINUTE INSTALLATION GUI.
Before installing please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.4.2. 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:
Copy the installation GUI folder 'weltpixel-extension-installation' in the root of your Magento installation. In some Magento configurations the public root folder may be under 'pub' directory.
In your browser go to www.yourmagentostore.com/weltpixel-extension-installation/ and simply follow the installation steps from the graphical interface, presented in your browser. See the installation video: 1 Minute Module Installation via browser GUI.
Wooohooo! The extension is now installed on your Magento store! Congrats!
If you experienced any issues or limitations with this quick GUI installation, see also SSH Installation below. SSH installation does the same thing but you are required to issue the commands step by step via CLI. Some servers may have high security configurations and may limit the functionality of this GUI Installer.
How to Install via SSH.
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.4.2. 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 Set Up the Mega Menu Extension.
How to Select a Category for Magento Mega Menu?
- Go to WeltPixel > Mega Menu Settings
- Mega Menu settings are specific to each level 1 category individually, allowing granular control over the menu design and functionality based on each category.
How to Configure the Mega Menu in Magento?
- 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
- Custom subcategories distribution - If disabled, the subcategories are evenly distributed to the number of columns. If enabled, you can decide the number of subcategories included in each column.
- Number of subcategories per column - Insert the number of subcategories you want included in each column, comma separted. For example, if you have 7 subcategories, and set the number of columns to 3, you can insert "1, 2, 4" to have the 1st subcategory in the 1st column, the next two in the 2nd column and the final 4 in the last column. Note: Any newly created subcategory will be added to the last column unless you change the distribution.
- 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.
How to Set Custom Links for Categories in Magento?
- 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..
How to Set Mobile Menu Breakpoint in Magento?
- 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.
Step 5 - Design Settings
- Enable - [Yes / No] - Enable to be able to set specific Design Options for the Mega Menu.
- Mega Menu Background Color - Select a Custom Background color for the Mega Menu.
- Mega Menu Font Color - Select a custom font color for Mega Menu items.
- Enable Advanced Hover Options [Yes / No] - Set Yes to be able to configure Advanced Hover Options.
- Mega Menu Font Color on Hover - Select the font color on hover for Mega Menu items.
- Mega Menu Hover Effect - Choose the animation effect for the Mega Menu underline when hovering over menu items.
- Mega Menu with color continuity - Select Yes for First Level Menu Items to get the same background color as the Mega Menu.
- MegaMenu-Page Overlay - Enable overlay on the page background to bring the Mega Menu into focus.
- Mega Menu Font Text-Transform - Select the Text-Transform for all items included in the Mega Menu.
- Font Size Level 0 - Set the font size for Navigation / Menu Level 0. Example: 20px
- Font Size Level 1 - Set the font size for Navigation / Menu Level 1. Example: 20px
- Font Size Level 2 - Set the font size for Navigation / Menu Level 2. Example: 20px
- Mega Menu Items Padding - Insert Padding for Mega Menu Items. Example: 5px 10px 5px 10px
- Mega Menu Level 0 Items Padding - Insert left right padding for Mega Menu Items. Example: 10px
|Compatibility||Magento Open Source, Magento Commerce, Magento Commerce Cloud B2B|
|Magento version||2.0, 2.1, 2.2, 2.3.x, 2.4.0, 2.4.1, 2.4.2|
|Updates cost||Free lifetime updates|
|Update frequency||Monthly or each time a new Magento version is released|
|Support period||1 Month Free Support, with options to extend|
|Refund period||30 days, for any reason|
|Updated||March 26, 2021|
|Code||100% Open Source Code|
|Bundle options||For best value buy it as part of the Pearl Theme or Stack Framework|
Mega Menu Change Log.
Version 1.10.7 - March 26, 2021
- Added various improvements to the Mega Menu and Header section to decrease the CLS (Cumulative Layout Shift) Core Web Vital, thus increasing performance.
- Fixed an issue which prevented Font Size values configured in the Design Options section from applying correctly.
- Fixed a hover issue that affected the last element from the Mega Menu.
- Excluded Magento 2.0.x - 2.2.x from new features and fixes starting with this release.
- Adjusted WeltPixel Developer section comments.
Version 1.10.5 - February 12, 2021
- Fixed an image generation issue whereby images uploaded via the Subcategories with Images functionality would generate an incorrect image link.
- Fixed a bug that prevented the full Breadcrumbs path from being displayed on the Product Page when navigating from the Category Page.
- Added small CSS adjustments to the Mega Menu Design options.
- Confirmed compatibility with the newly released Magento 2.4.2 version.
- Added additional backend versioning verifications.
- Backend module code optimizations.
Version 1.10.1 - October 22, 2020
- New Feature: Added Promotional Labels to Mega Menu. This allows for bringing attention to certain Categories and helps boost conversions.
- New Feature: Added a background color option + overlay to allow for new Mega Menu designs.
- New Feature: Added a Color Continuity option that allows Level 1 menu items to inherit the Mega Menu Background Color.
- New feature: Improved Mega Menu design options with various settings for elements such as: Font Size, Hover Color, Hover Effect, Text-Transform and Paddings.
- Fixed a bug related to the newly introduced Subcategory Image functionality whereby the URL was, in certain cases, structured incorrectly which prevented the images from loading.
- Confirmed compatibility with the newly released Magento 2.4.1 version.
Version 1.10.0 - August 10, 2020
- New Feature: Separate images can now be added to each Subcategory under the main Level 1 Category for a proper showcase of your products directly via the Navigation.
- Fixed a display issue related to Hover Shadow Color for Categories with a custom font color. The Hover Shadow Color was previously set to black permanently.
- Fixed a bug that prevented empty Categories from being clicked on when they had a Custom Link. This only affected mobile devices.
- Fixed various Mega Menu display issues on the Microsoft Edge and Internet Explorer browsers.
- Confirmed compatibility with the newly released Magento 2.4.0 version.
Version 1.9.8 - July 6, 2020
- New Feature: Added the possibility of displaying submenu for HTML Content or Static Block-only Level 1 Categories. Previously, this was not possible as a Level 1 Category needed to have at least one Subcategory for the dropdown to display on the frontend.
- New Feature: It is now possible to change the font color and hover font color for individual Categories and Subcategories.
- New Feature: Added the possibility of choosing how many Subcategories are included per column. Previously, this was done dynamically, and the control was limited.
- Fixed a display bug which caused overlapping with the Mobile Menu on Header V2 (Pearl Theme only).
- Small CSS adjustments.
- Whitelisted domain for Content Security Policies introduced in Magento 2.3.5.
Version 1.9.7 - May 7, 2020
- Fixed an issue that occurred on Magento Luma whereby scroll bars were added to the browser window when hovering over Categories.
- Confirmed compatibility with Magento 2.3.5.
- Implemented small Backend performance optimizations.
- Added nxcli.net (Nexcess temporary URL) as a valid domain in the licensing process.
- Added an option in the Developer section to allow for switching Magento's CSP between "report-only" and "restrict".
Version 1.9.6 - April 9, 2020
- Fixed a bug that caused the logo to have an increased container width on Header V4 (Pearl Theme only).
- Fixed a bug that caused the mobile menu to become scrambled on certain intermediary resolutions.
- Fixed a Backend issue on Magento Commerce whereby the Category Schedule functionality was not working properly.
Version 1.9.5 - March 10, 2020
- Fixed an incompatibility with the default Magento Page Builder on Magento Commerce Edition that caused Mega Menu options to become unsavable.
- Fixed an issue which caused the Menu to become hidden on certain mobile devices until the page was scrolled down.
- Added backend Google reCaptcha compatibility for Magento 2.3.x
Version 1.9.4 - February 5, 2020
- Fixed a compatibility error related to the cache in Magento 2.3.4 which caused the frontend not to load.
- Fixed an bug which caused a 404 error in the console when the module was disabled via the Magento Admin.
- Code enhancements for increased security. Changed User Group info collection method.
- Confirmed compatibility for Magento 2.3.4.
Version 1.9.2 - November 27, 2019
- Fixed an issue which caused the Mobile Navigation to disappear on certain mobile devices.
- Fixed a bug which caused Header V4 to be unclickable on mobile.
- Added Magento and PHP version in the WeltPixel Developer section.
Version 1.9.1 - October 16, 2019
- Fixed an issue which caused the Language Selector to disappear when resizing from mobile to desktop.
- CSS adjustments.
- Confirmed compatibility with the latst Magento 2.3.3 version.
- Included the WeSupply Toolbox integration extension - Proactive Notifications Email & SMS, Returns & RMA, Store Locator, Delivery Date Estimate, Logistics Analytics, NPS & CSAT score. Get Free on-boarding and launch within 24 hours.
Version 1.9.0 - July 18, 2019
- Removed a duplicate notice displayed under the WeltPixel Custom Link option in the Magento Admin.
- Confirmed compatibility with Magento 2.3.2.
- Added HTTPS endpoint for licensing process.
Version 1.8.5 - June 7, 2019
- Small performance improvements.
Version 1.8.4 - April 25, 2019
- Added PHP version in the WeltPixel Developer Section.
Version 1.8.3 - April 3rd, 2019
- Fixed a bug whereby the Maximal Category Depth options did not apply to Mega Menu in Magento 2.3.
- Font Size set in Admin is now applied to Mega Menu categories.
- Fixed an issue whereby sometimes, when the Sticky Header was active, the subcategories menu could not be accessed as it disappeared too fast.
- CSS adjustments.
- Confirmed compatibility for Magento 2.3.1.
Version 1.8.2 - January 24, 2019
- Fixed “include in menu” category functionality. Categories are not added to menu anymore if this option is selected. Bug occurred in Magento 2.3.
- Fixed Mega Menu issue caused by a Magento bug - “use default” checkbox was not avaialble on store-view level, now it works.
- Helpcenter adjustment, removed zendesk iframe and added a simple link to our Support Center in order to avoid any potential conflicts with other admin js added by 3rd party extensions.
- Fix for multiple rewritten ImageFactory classes, rewrite check validity, rewrite checks optimizations.
Version 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.
Version 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.
Version 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.
Version 1.7.3 - August 23, 2018
- License improvements, adding *.magento.cloud as a valid test domain.
Version 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.
Version 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.
Version 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.
Version 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.
Version 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.
Version 1.6.0 - March 1st, 2018
- Compatibility with Magento 2.2.x header and Pearl Theme Headers.
- Added Backend dependancy.
Version 1.5.8 - January 12, 2018
- Added version control for installed WeltPixel modules, including latest version check.
Version 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.
Version 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.
Version 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.
Version 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
Version 1.0.0 - June 16, 2017
- Initial release