User Tools

Site Tools


Sidebar

magento_2:mega_menu

For more details see the Mega Menu for Magento 2 extension page.

Mega Menu for Magento 2

Apply dynamic and flexible navigation menu to your webstore with Magento 2 Mega Menu extension. Add various types of content right to the menu bar to attract customers’ attention and enhance their shopping experience.

  • Adjust your menu display using different layouts
  • Add dynamic blocks, videos, images and external links
  • Apply various catchy labels
  • Configure the menu without any technical skills
  • Make your menu mobile friendly

Configuration

To set the general settings of the extension, go to Stores → Configuration → Amasty Extensions → Mega Menu.

Visual content is available for desktops only, but in mobile version the general submenu dropdowns and color schemes are also displayed.

Expand the General tab.

Enabled - set to Yes to activate Mega Menu.

Enabled Sticky Menu - enable to display sticky menu navigation during vertical page scrolling.

In the Color Settings tab you can customize menu style to match your website design.

Color Scheme Template - select one of the ready-made templates or choose Custom to adjust colors manually.

With a handy color-picker tool it is possible to configure the colors for:

  • Menu Background/Text;
  • Submenu Background/Text;
  • Menu Item Hover;
  • Hamburger Button.

To adjust the display of default menu items, please go to Catalog → Categories and click the category you need.

Expand the Mega Menu tab.

General Settings

Submenu Width - set the width of the dropdown tab that will fit your website style.

Full Width - submenu will have the same width as the general menu bar.

Auto - the width will be set automatically according to the content options.

Custom - this option allows to set the width manually (in pixels).

Menu Label Text - specify the text of the label to attract customers’ attention to the necessary block of the menu.

Text/Background color - customize label’s style using color picker tool.

Content

In this tab you can adjust submenu content. The extension allows to add images, videos, CMS blocks, banners, widgets and products. You can arrange elements the way you need using WYSIWYG editor. Also, the extension is fully compatible with Page Builder.

Page Builder Functionality

Page Builder allows to create rich in content pages just in few clicks via handy drag-and-drop function.

This tool includes various layouts, content and media elements. With the preview mode you can check the result and make edits if needed. Each element has its own settings so that you can configure it according to your website style and business needs.

Here you can see all available elements:

Check Page Builder User Guide to learn more about the elements and see the variants of Page Builder usage.

WYSIWYG Editor

If Page Builder is not installed, it is possible to customize menu bar via WYSIWYG editor.

For example, to make columns you need to insert the table and specify the necessary number of columns, rows and adjust additional settings. You may use the {child_categories_content} variable for showing child categories and so on.

For more information, see this WYSIWYG User Guide.
Employ Magento 2 Advanced Product Reviews extension to show product reviews right on the navigation menu and engage customers on their first step of the interaction with your store website.

Custom Menu Items Grid

With the Mega Menu extension, you can add custom items to the menu bar. To see all additional items on a separate grid, go to Content → Amasty Mega Menu → Custom Menu Items.

Here you can check the items' Title, URL Key, active Status and Sort Order.

Edit or Delete items in the Action column or perform mass actions via Actions dropdown menu.

To create a new menu item, click Add New Custom Item.

New Custom Item

Specify the General Settings and the Content of a new menu tab.

Title - fill in the title that will be displayed in the navigation menu.

URL Key - add internal or external link to the menu item.

Sort Order - specify the order of the particular item to be displayed on the frontend.

Status - set to Yes to enable the menu tab.

Hit the Save button.

Frontend Examples

Enrich your site menu bar with unique content.

Adjust submenu dropdown style according to your website design. Add catchy labels to any item of the menu.

Increase the number of purchases by show reviews in menu with Amasty Advanced Product Reviews for Magento 2.

Add Magento 2 Improved Layered Navigation to equip your website with a highly flexible vertical and horizontal navigation menu.

Find out how to install the Mega Menu for Magento 2 via Composer.

Rate the user guide
 stars  from 1 votes (Details)
magento_2/mega_menu.txt · Last modified: 2019/05/14 11:48 by tihomirova