1. INTRODUCTION
Do you know how long customers stay on web pages? Surprisingly, it’s only 10-20s on average (NNGroup, 2011) even if you have a variety of products and categories to show. To not let customers leave so soon, direct them the shortest way to what they are looking for.
Rootways Mega Menu extension is your solution to create the best sitemap right on the main navigation.
No technical knowledge required! You can flexibly set up your menu as per your requirements with Content, Products, Category and everything you want to feature.
You don’t need to worry about your site speed. Rootways Mega Menu doesn’t affect your site speed.
Let’s take a look at its Features below:
- Easily create different types of menu items by selecting mega menu types.
- CMS Static block within mega menu.
- CMS Static block within mega menu.
- Category icons.
- Set number of columns.
- Display products.
- Add products to cart directly from Mega Menu.
- New vertical tabbing menu with user friendly layout.
- Easily manages position of content, number of columns, category image size, and show category image.
- Arranging Position of Categories.
- Show and hide specific category from mega menu.
- Show and hide home icon.
- Contact form in menu. Form submitted using Ajax without reloading page.
- Set Contact Form in Mega Menu and Form is submitted using Ajax without loading page.
- Responsive
- Easy to install, configure and use.
- Support by Rootways – any questions we are here to help you.
2. Know Rootways Mega Menu Dropdown section.
There are 5 parts/sections of each dropdown on the frontend.
Check following screenshot of front-end.
Check following screenshot of backend.
1) Category section: This displays all subcategories of the main category, this is fully dynamic, which means if you add any new subcategories in admin then it will automatically be added at mega menu “category section” in the dropdown in the front-end.
2) Left Side Content: This displays any static content added under “Left Side Content Block” at the admin side.
If you add any content here then you must have to choose/decide the width of this section. You can select Width this section from “Left Side Block Width”.
3) Right Side Content: This display any static content added under “Right Side Content Block” at the admin side
If you add any content here then you must have to choose/decide the width of this section. You can select Width this section from “Right Side Block Width”
4) Header Content: This display any static content added at the admin side under “Header Content Block” (Check the following screenshot)
5) Footer Content: This display any static content added at the admin side under “Footer Content Block” (Check the following screenshot)
In above points 2 and 3, you can see that we are selecting the width of left side content and right side content, so here a question may occur, from where we can decide/choose the width of the category section?
Ans: Category section width will automatically be decided based on the width you selected for left-side content and right-side content. Following is an example of how the front-end dropdown will be display based on the admin settings.
Example 1: Assume for main Category “A” you have selected the following from the admin.
Selected “3/12” in the “Left Side Block Width”
Selected “6/12” in the “Right Side Block Width”
You have added nothing for “Header Content” and “Footer Content”.
Now at front-end dropdown will be displayed as follows.
Left Side Content will be displayed in 25% (3/12)
Right Side Content will be displayed in 50% (6/12)
Category section will be displayed in 25% (Left Side Block Width – Right Side Block Width)
In header and footer displaying nothing.
Example 2: Assume for main Category “B” you have selected the following from the admin.
Selected “Do Not Show Content” in the “Left Side Block Width”
Selected “3/12” in the “Right Side Block Width”
You have added nothing for “Header Content” and “Footer Content”.
Now at front-end dropdown will be displayed as follows.
Left Side Content will not be displayed as you have selected “Do now show content” which means 0% width occupied by this.
Right Side Content will be displayed in 25% (3/12)
Category section will be displayed in 75% (Left Side Block Width – Right Side Block Width)
In header and footer displaying nothing.
3. HOW TO USE AND CONFIGURE
This section will guide you to configure Rootways Mega Menu Extension and how to use different layout with different categories. It’s very easy and fast!
You have to manage Mega Menu from two places, first one from Configuration setting and second one from Category section.
3.1 General Settings:
3.1.1 Settings:
This section will show you how to manage Mega Menu from Configuration settings.
Log in to Admin Panel and then click STORES -> Configuration -> Rootways Extensions -> Mega Menu. Below is the Screen shot for Mega Menu Settings
Admin: Configuration Settings for “Mega Menu”
- Enable: Enable/Disable Mega Menu using this setting. If it is disabled, then you can see default Magento menu at front end side.
- License key: Enter License key that was sent to you by us in the email.
- Show Home link in Menu: Show/Hide Home link in Mega Menu.
- Show Contact Form in Menu: If select “No” then contact form gets hidden from mega menu. If select “Only Contact Form” then display contact form only without content. If select “Form with Content” then display contact form with content.
- Contact Us Menu Content: If selected “Form with Content” for above option then you can see this option. Add content of mega menu contact form from here.
- Custom Link: You can add custom links to mega menu with dropdown at specific position.
- Top Menu Alignment: Decide whether you want to display menu to left, right or center align.
- Show Top Level Categories Icon: If set to “Yes” then you can see top category icon on mega menu.
- Show View More: If you want to add “View More” link then set “Yes”, otherwise “No”.
- Add View More After: If set “Yes” for above option then this option will be visible. If your website has 20 categories and you want to display first 10 categories only in mega menu and display other remaining categories under View more then add here 10.
- Delay Dropdown Hover: Set “Yes” if you want delay in mega menu dropdown.
- Delay Second: Add delay second of dropdown.
3.1.2 Design:
From this section you can change layout, colors, font, etc of mega menu.
Admin: Configuration Settings for “Mega Menu”
3.2 Mega Menu Management:
This section will guide you how to manage Mega Menu from category section.
Go to Admin Panel -> PRODUCTS -> Categories. Over here you can see New “Rootways Menu” tab is created using this extension.
Rootways Menu : This tab has options to display Menu as per your requirements. When you first open this tab of any category, there is no option of “Mega Menu Type” selected.
Note : You must have to select ‘Mega Menu Type‘ option with each and every main category of your website. No need to select for sub categories of main category, e.g. in below screen there are 12 main categories (Highlighted with arrow are main categories) and you only need to select ‘Menu Type’ with these main categories.
There are more than 11 types of Mega Menu and which will cover your entire required navigation menu. The types of Mega Menu are as follows:
- Simple Dropdown
- Simple Dropdown
- Dropdown with Mega Layout
- Half Width
- Half Width – with sub category as title
- Full Width
- Full Width – with sub category as title
- Tabbing menu.
- Tabbing – horizontal
- Multi-Tabbing
- Products only
3.3 Types of Mega Menu:
Read about each Menu type in detail to know which type of menu matches your requirement and how it works.
1] Simple Dropdown
This is simple dropdown menu, with this menu you can see tree of categories with 4th level of categories that means it expands to sub-sub-sub categories.
Below are detail descriptions on each options of this menu type.
- Dropdown Position: Whether open dropdown at left side or right.
- Show Category Image: Whether to show category image or not.
- Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
- Category Image Width: Add the Category Image Width.
- Category Image Height: Add the Category Image Height.
- Label Color: Add a suitable color for the label as per your requirement.
- Label Text: Add a suitable text for the label.
- Custom Class: Add a custom class for the menu.
Admin: Menu Type= “Simple Dropdown”
Front side: Result of Menu Type= “Simple dropdown”
2] Dropdown with Title
This is a dropdown menu having the functionalities same as the simple dropdown but the only difference is in the layout. The category title will be displayed.
Below are detail descriptions on each options of this menu type.
- Dropdown Position: Whether open dropdown at left side or right.
- Show Category Image: Whether to show category image or not.
- Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
- Category Image Width: Add the Category Image Width.
- Category Image Height: Add the Category Image Height.
- Label Color: Add a suitable color for the label as per your requirement.
- Label Text: Add a suitable text for the label.
- Custom Class: Add a custom class for the menu.
Admin: Menu options for “Dropdown with title”
Front side: Result of Menu Type= “Dropdown with Title”
3] Half Width
Half Menu is for less sub categories. This dropdown displays in half width of navigation showing the sub categories. This is suitable for those categories that have few sub categories.
Below are detail descriptions on each options of this menu type.
- Sub-category Columns: Choose the number of columns for the Sub-categories.
- Dropdown Position: Whether open dropdown at left side or right.
- Left Side Content Block: Add the content to be displayed on Left side Block.
- Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
- Right Side Content Block: Add the content to be displayed on Right side Block.
- Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
- Header Content Block: Add the content to be displayed on Header block.
- Footer Content Block: Add the content to be displayed on Footer block.
- Show Category Image: Whether to show category image or not.
- Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
- Category Image Width: Add the Category Image Width.
- Category Image Height: Add the Category Image Height.
- Label Color: Add a suitable color for the label as per your requirement.
- Label Text: Add a suitable text for the label.
- Custom Class: Add a custom class for the menu.
Admin: Menu options for “Half Width”
You can show Category image (as icon) with each sub-categories of this menu type.
Front side: Result of Menu Type= “Half Menu with category image”
4] Half width with sub category as title
This menu is displayed in half width with sub- categories as titles. This is suitable for those categories only having sub categories and sub-sub categories.
Below are detail descriptions on each options of this menu type.
- Sub-category Columns: Choose the number of columns for the Sub-categories.
- Dropdown Position: Whether open dropdown at left side or right.
- Left Side Content Block: Add the content to be displayed on Left side Block.
- Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
- Right Side Content Block: Add the content to be displayed on Right side Block.
- Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
- Header Content Block: Add the content to be displayed on Header block.
- Footer Content Block: Add the content to be displayed on Footer block.
- Show Category Image: Whether to show category image or not.
- Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
- Category Image Width: Add the Category Image Width.
- Category Image Height: Add the Category Image Height.
- Label Color: Add a suitable color for the label as per your requirement.
- Label Text: Add a suitable text for the label.
- Custom Class: Add a custom class for the menu.
Admin: Menu options for “Half Width with sub- category as title”
Front side: Result of Menu Type= “Half Width with sub- category as title”
5] Full Width
This menu is displayed in half width with sub- categories as titles. This is suitable for those categories only having sub categories and sub-sub categories.
Below are detail descriptions on each options of this menu type.
- Sub-category Columns: Choose the number of columns for the Sub-categories.
- Dropdown Position: Whether open dropdown at left side or right.
- Left Side Content Block: Add the content to be displayed on Left side Block.
- Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
- Right Side Content Block: Add the content to be displayed on Right side Block.
- Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
- Header Content Block: Add the content to be displayed on Header block.
- Footer Content Block: Add the content to be displayed on Footer block.
- Show Category Image: Whether to show category image or not.
- Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
- Category Image Width: Add the Category Image Width.
- Category Image Height: Add the Category Image Height.
- Label Color: Add a suitable color for the label as per your requirement.
- Label Text: Add a suitable text for the label.
- Custom Class: Add a custom class for the menu.
Admin: Menu options for “Full Width”
Front side: Result of Menu Type= “Full width”
6] Full width with sub category as title
This menu is displayed in half width with sub- categories as titles. This is suitable for those categories only having sub categories and sub-sub categories.
Below are detail descriptions on each options of this menu type.
- Sub-category Columns: Choose the number of columns for the Sub-categories.
- Dropdown Position: Whether open dropdown at left side or right.
- Left Side Content Block: Add the content to be displayed on Left side Block.
- Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
- Right Side Content Block: Add the content to be displayed on Right side Block.
- Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
- Header Content Block: Add the content to be displayed on Header block.
- Footer Content Block: Add the content to be displayed on Footer block.
- Show Category Image: Whether to show category image or not.
- Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
- Category Image Width: Add the Category Image Width.
- Category Image Height: Add the Category Image Height.
- Label Color: Add a suitable color for the label as per your requirement.
- Label Text: Add a suitable text for the label.
- Custom Class: Add a custom class for the menu.
Admin: Menu options for “Full Width with sub- category as title”
Front side: Result of Menu Type= “Full Width with sub- category as title”
7] Tabbing Menu
It displays Mega Menu feature with vertical tab of category. This is an extra ordinary feature of Mega Menu ever used with Magento Websites.
Below are detail descriptions on each options of this menu type.
- Sub-category Columns: Choose the number of columns for the Sub-categories.
- Dropdown Position: Whether open dropdown at left side or right.
- Left Side Content Block: Add the content to be displayed on Left side Block.
- Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
- Right Side Content Block: Add the content to be displayed on Right side Block.
- Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
- Header Content Block: Add the content to be displayed on Header block.
- Footer Content Block: Add the content to be displayed on Footer block.
- Show Category Image: Whether to show category image or not.
- Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
- Category Image Width: Add the Category Image Width.
- Category Image Height: Add the Category Image Height.
- Label Color: Add a suitable color for the label as per your requirement.
- Label Text: Add a suitable text for the label.
- Custom Class: Add a custom class for the menu.
Note: No need to select “Show Category Image” because with this category we take category image by default. So please add category images to every sub-sub category for better layout.
Admin: Menu options for “Tabbing”
Front side: Result of Menu Type= “Tabbing”
8] Tabbing Horizontal
It displays Mega Menu feature with horizontal tab of category. This is an extra ordinary feature of Mega Menu ever used with Magento Websites.
Below are detail descriptions on each options of this menu type.
- Sub-category Columns: Choose the number of columns for the Sub-categories.
- Dropdown Position: Whether open dropdown at left side or right.
- Left Side Content Block: Add the content to be displayed on Left side Block.
- Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Left Side Block.
- Right Side Content Block: Add the content to be displayed on Right side Block.
- Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the suitable width for the Right Side Block.
- Header Content Block: Add the content to be displayed on Header block.
- Footer Content Block: Add the content to be displayed on Footer block.
- Show Category Image: Whether to show category image or not.
- Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
- Category Image Width: Add the Category Image Width.
- Category Image Height: Add the Category Image Height.
- Label Color: Add a suitable color for the label as per your requirement.
- Label Text: Add a suitable text for the label.
- Custom Class: Add a custom class for the menu.
Note: No need to select “Show Category Image” because with this category we take category image by default. So please add category images to every sub-sub category for better layout.
Admin: Menu options for “Tabbing Horizontal”
Front side: Result of Menu Type= “Tabbing Horizontal”
9] Product Only
This Mega Menu displays Products only. It can be used to feature Best selling Products, Products with Special offer. User is redirected to Product detail page or Product can be added to Cart directly from mega menu. (Only simple Product can be add to cart)
To display Product under ‘Products only’ Mega Menu just create Category with any name (in given example we take Best Seller) then add products under this category and select Menu Type = “Products only” and you can see all products in Mega Menu under this category.
Below are detail descriptions on each options of this menu type.
- Show Category Image: Whether to show category image or not.
- Mega Menu Category Image: upload the image from here if ‘Yes’ is selected for the above option.
- Category Image Width: Add the Category Image Width.
- Category Image Height: Add the Category Image Height.
- Label Color: Add a suitable color for the label as per your requirement.
- Label Text: Add a suitable text for the label.
- Custom Class: Add a custom class for the menu.
Admin: Menu options for “Products only”
Front side: Result of Menu Type=”Products Only”
Responsive Layout of Rootways Mega Menu
Responsive Layout of Rootways Magento 2 Mega Menu is adaptive to all screen resolutions whether it is Mobile or Tablet.
Have a look at some of the screenshots of the Responsive Magento 2 Mega Menu.
Tablet screen resolution.
5.FAQ
Que: How to add/display a label with main and/or subcategory?
Ans: You can add a label with any category using Rootways mega menu. Follow these steps to add a label.
- Step 1: Go to Admin > CATALOG > Categories.
- Step 2: Click on the category in which you want to add a label.
- Step 3: Move to the “Rootways Menu” tab.
- Step 4: Enter a text of the label to the “Label Text” text field.
- Step 5: Choose the background color of the label from “Label Color”.
- Step 6: Save category, clear Magento caches, (do reindexing if clear caches will not work) and you can see that label at the front-end.
