Magento 2 Mega Menu extension supports you reorganize the entire list of products in a neat and spectacular way by creating dynamic navigation menus with no code required.
This Magento 2 Mega Menu Documentation covers the installation, setup, and use of this extension and provides answers and solutions to common problems and issues. We encourage you to read this document thoroughly if you are experiencing any difficulties.
Table of Contents
I. Overview
1. Introduction
Latest Version:
Magento 2 Megamenu Normal Version: Version 1.1.6 – August 27, 2021
Magento 2 Megamenu PRO Version: Version 1.1.9 – August 06, 2021
By: Landofcoder Team
2. Installation
2.1. Setup via FTP or cPanel
At now the module just supports setup via uploading module files via FTP and running Magento 2 commands.
You should go to our site, log in with your account > go to Dashboard > Download Products > then download module file “Ves Megamenu” will get the file like this “ves_megamenu.zip“ or “ves_megamenu_pro_v1.1.3.zip”. After decompressing it we will get the folder and module files for each Magento 2 version. If your site is running Magento 2.4.x, set up the module file under folder Magento 2.4.x.
After upload module files to your server with FTP client or cPanel. Please run magento 2 commands via SSH terminal:
php bin/magento setup:upgrade –keep-generated
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean
2.2. Install sample data
Please follow the steps:
1. Go to Back-end > Venustheme > Setup > Import
2. Select the sample data file (in download file)
3. Refresh the cache under Back-end > System > Cache Management
Video Guide To Install Magento 2 Megamenu
View video guide at link: https://youtu.be/dBNDrcMCkvk
II. Detail Document
1. Getting started
This document covers the installation, setup, and use of this extension and provides answers and solutions to common problems and issues. We encourage you to read this document thoroughly if you are experiencing any difficulties.
2. Information
Magento 2 Mega Menu extension supports you reorganize the entire list of products in a neat and spectacular way by creating dynamic navigation menus with no code required.
In this Magento 2 mega menu extension, we offer various fruitful features to let customers find all desired products at the first sight.
3. Features
- Drag & Drop Menu Builder
- Vertical and Horizontal Menu
- Mobile Menu: Off-Canvas Menu & Accordion Menu, Drilldown Menu
- 7 Submenu Types: Anchor Text, Dynamic Category Listing, Product Listing, Product Grid, Child menu., Default Category Listing, Content
- Unlimited Menu Possibilities
- Widget Support or add code to file XML on any position
- Multiple Animations Effects Supported
- Structure Preview
- Auto Data Backup
- Use Custom Menu For Mobile
- REST API Support
- Dynamic Magento 2 Navigation Menu
- Right To Left Language Support
4. Module Configuration
Go to admin > Stores > Configuration > Venustheme > Ves Megamenu:
5. Create New Megamenu Profile
In this tutorial, I will show you how to create a menu in Magento 2 easily with drag n drop features and a visual interface.
Firstly, Go to Back-end > Venustheme > Mega Menu > Add New Menu
There are two tabs: General Settings, Menu Editor (for the normal version, PRO version is more advanced)
Edit menu profile (Normal Version):
Edit menu profile (Pro Version):
General Settings Tab
Name: Title of the menu, such as Top menu, Vertical menu,
Alias: You can display menus that have the same alias for different stores
Event: There are two options
Hover: Used to create Horizontal menu, Vertical Menu
Click: Used to create Tree menu, Accordion menu
Scroll to Fixed: Allow this menu fixed on the top page when scroll over menu position:
Additional Class: Add custom classes
Disable Dimensions: Enter the width(pixel) want to disable this menu. The menu will be removed when your screen width is less than this value
Bootstrap 3 Media Query Breakpoints:
Large Devices, Wide Screens: 1200px
Medium Devices, Desktops: 992px
Small Devices, Tablets: 768px
Extra Small Devices, Phones: 480px
iPhone Retina: 320px
Desktop Template: Apply when screening width is more than 768px. There are 3 template types:
Horizontal Menu
Vertical Menu Left
Vertical Menu Right
Mobile template: There are two template types:
Disable Item Blocks on mobile: Disable menu item blocks as Header Block, Left Block, Right Block, Footer Block.
Customer Groups: Select customer group(s) can see this menu
Store View: Select store(s) that you want to show this menu
Status: You can enable or disable the menu
Menu Editor Tab
This tab allows managing menu items
6. Configure menu item
I will show you how to config Magento 2 menu with our Magento 2 mega menu extension. Please follow our tutorials step by step.
A menu item has 8 tabs:
- General Information
- Dropdown
- Header
- Left Block
- Main Content
- Right Block
- Bottom Block
- Design
Before configuring all item settings, we need to check the structure of each menu item
General Information
Name: Title of the menu item, such as Home, Women, Men, etc…
Link Type: There are 2 link types:
Custom Link: Enter your custom link, this field supports Magento 2 shortcode: {{store url=”contact”}} => http://domain.com/contact
Category Link: render link by specific category
Link Target: There are 4 options:
Load in a new window
Load in the same frame as it was clicked
Load in the parent frameset
Load in the full body of the window
Show Icon: Upload an icon for this item, then update the icon position
Is Group: Set Yes to allow Sub-menu items to show in the same level of a parent without hovering on the parent to show them.
Disable Dimensions: Enter the width(pixel) want to disable, the menu will be hidden when screening width less than the field value
Bootstrap 3 Media Query Breakpoints:
Large Devices, Wide Screens: 1200px
Medium Devices, Desktops: 992px
Small Devices, Tablets: 768px
Extra Small Devices, Phones: 480px
iPhone Retina: 320px
Status: You can enable or disable this item
Dropdown
Width: Set width for menu item dropdown. Fx: 1000px, 100%
Animation In: Dropdown appearance effect. There are 9 groups and 44 effects
Animation Time: Set total time of effect.
Alignment: There are four alignment types for the menu content to appear
From the left menu: menu dropdown content will appear from the left of the menu bar to the right
From the right menu: menu dropdown content will appear from the right of the menu bar to the left
From left item: menu dropdown content will appear from the left of the menu item
From right item: menu dropdown content will appear from the right of the menu item
From right item: menu dropdown content will appear from the right of the menu item
Background Options: background color, background image, background-repeat, background-position x, background-position y
Inline CSS: Add custom code css for this item.
Header: Default width is 100%.
Left Block: Supports Wysiwyg editor, you can insert HTML code, Video(youtube, ,…), Magento widget,etc
Main Content: There are four content types
Child Menu Item: Display menu item in the menu editor section
Content: Supports Wysiwyg editor: insert HTML code, Video(youtube, vimeo,…), Magento widget
Dynamic Content Tab: Each item as a tab, the first tab is default active
Sub-Categories: Show all sub-categories by specific category
Right Block: Change block width. Fx: 100%, 400px. Supports Wysiwyg editor
Bottom Block: Default width is 100%. Supports Wysiwyg editor
Design: Customize the style of menu item: color, background color,…
7. Show menu on frontend
Default menu profile with alias = “menu-top” (normal version) or “top-menu” (pro version) will show on frontend.
In order to change Magento 2 default menu, please follow our below tutorials step by step.
Step 1. Create the file app/design/THEME_VENDOR/THEME/Ves_Megamenu/layout/default.xml
Step 2. Add code below into the file content and change YOUR_MENU_ALIAS_HERE to a menu alias that you want to show
III. Support Information
If you have any questions or requests, please contact us at [email protected]. We are very happy to assist you!
Website: https://landofcoder.com/
Blog: https://blog.landofcoder.com/
Support: https://landofcoder.ticksy.com/
Thank you and stay safe!
People also search for:
- magento mega menu documentation
- Guide for Mega Menu for Magento 2
- how to add mega menu in magento 2
- magento 2 custom navigation menu
- magento 2 mega menu free by landofcoder
- how to add menu in magento 2 frontend
- magento 2 mega menu extension
- mege menu extenstion for magento
- guide for mega menu extension
