I. Install Module.

Magento2 ExtenStore MegaMenu module installation is very easy, please follow the steps for installation-

1. Unzip the respective extension zip and create Extenstore(vendor) and Megamenu(module) name folder inside your magento/app/code/ directory and then move all module’s files into magento root directory Magento2/app/code/Extenstore/Megamenu/ folder.

Run Following Command via terminal

———————————–

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

2. Flush the cache and reindex all.

now module is properly installed.

After the module is installed, we need to enable the module in admin:

Stores => Configuration => EXTENSTORE => MegaMenu => General Settings => Enable => Yes

=> Save and Clear cache => Now we can config the module.

II. Config Module.

Config Menu display Horizontal or Vertical

Stores => Configuration => EXTENSTORE => Es MegaMenu => Menu Display Type

Config Menu’s theme:

Stores => Configuration => EXTENSTORE => Es MegaMenu => Menu Theme

Config Sticky Menu

Stores => Configuration => EXTENSTORE => MegaMenu => Sticky Menu

General Setting 1

  • Default Menu TypeOptions – Full Width, Static Width, Classic.
    • When we select Static Width, it will appear one more param is “Static Width” below where you can put value for width (pixel).
  • Menu Theme: Options – Theme 1, Theme 2 … Theme 14, Your Theme.
    • When we select Your Theme we can define your theme in file view\frontend\web\css\style.css, we will see css code like this “.es_megamenu .es_mm_items.theme14” and we only need duplicate these code and change to “.es_megamenu .es_mm_items.yourtheme”. Now you can change css like you want.
  • Max Width: Config max-width for menu.
  • Menu Font size: Config font-size for menu item level 1.
  • Visible Menu Depth : Config Level of menu will display.

General Setting 2

  • Menu Font Size: Set font-size for menu item level 1
  • Visible Menu Depth: Set level of menu will display.
  • Menu Display Type: Menu can displays 2 types are Horizontal & Vertical
  • Submenu Effect: Support 3 effects for submenu’s appear – Default, Fade In/Out, Slide Up.
  • Show Home Button: Select Yes to show Home button on menu  .
  • Home Button Icon: We can add icon class for home button. Eg: if we are using fontawesome, we can add home icon class is “fas fa-home

 

General Setting 3

We can config Background Color for menu, config Text Color and color for text when hover, text color for active status.

General Setting 4

This settings are for submenu with mega style. We can config background color for submenu, text color for submenu and text color when hover.

General Setting 5

This settings are for submenu with css style. We can config background color for submenu, text color for submenu and text color when hover.

General Setting 6

Config the menu display Sticky or  not. When we select Yes, if we scroll the page, the menu will always display on top.

General Setting 7

We can add a static block on the top or the bottom menu. we only need put Static Block Id.

Menu Item Settings

These settings are for each menu item when we edit a category

(Admin => CATALOG => Categories)

 

Item Settings 1

  • Sub Menu Columns Width: If this item’s submenu has 2 columns, we want to set the first column is 300px and the send column is 500px of width. We can put value is: 300|500
  • Hide This Menu Item: Select Yes to hide this menu item from menu.
  • Font Icon Class: Put the class of icon font that we want it display in front of this menu item.
    • Eg: if we use fontawesome and want to show phone icon you can put fas fa-phone to this param.
  • Show Menu Content: If we select Yes, it will show menu item’s description.
  • Show Menu Block: If we select Yes, it will show block in Content=>Add CMS Block when config menu item

Item Settings 2

  • Menu Width: We can put auto  or set with is px (eg: 100px).
  • Sub Menu Type: 2 type for submenu are Mega Menu Css Menu
  • Sub Width Type: Menu support 3 types of width:
    • Default: Menu’s width will auto
    • Static Width: Select this, we can put with value (eg: 800px) in param Sub Menu Width below
    • Full Width: Width of submenu will auto display full.
  • Sub Menu Columns: Config number of columns for submenu.

Item Settings 3

  • Sub Content Top: Show content on top of submenu
  • Sub Content Rigth: Show content on right of submenu

Item Settings 4

  • Sub Content Bottom: Show content on Bottom of submenu
  • Sub Content Left: Show content on Left of submenu