Magento 2. How to Customize the Main Menu

In this tutorial we are going to show you how to customize the Main Menu  of your Magento store with the help of Mega Menu extension.

* The Mega Menu extension is available for all Magento 2 themes by Zemez.

magento mega menu
4 columns dropdown menu with subcategories, featured product, banners and labels.
To add dropdown menu as shown above, you should do the following:

First, create 1 category with 3 subcategories. Note, these 3 subcategories should also have some subcategories in it.

Check the tutorial on how to Manage Product Categories.

The category structure should be as follows:

magento categories

Then, create static blocks for the Mega Menu.

Add Static Blocks

magento menu
1. In the top menu navigate to Content > Blocks.

2. In the top right corner click the Add New block button to add a new static block.

3. Specify the block name (Mega menu product title), identifier (mm-product-title) and choose the Store View the block will be available for.
4. Move to CMS Static Block content area and enter the next content( to switch to the HTML editor press the Show / Hide Editor button):
See the tutorial on How to add CMS Static Block.

5. Save the settings.

6. Then you need to add Megamenu-banner-1 and Megamenu-banner-2 static blocks with images.

Click Insert/ Edit image button and browse the image you want to display in the drop-down menu.

Images:
Configure Mega Menu

1. Go to Products > Categories. Select the any category you want to apply Mega Menu to.

2. Expand the Megamenu tab.

3. Enable Megamenu for this Category.

4. You should add 2 rows.
add 2 rows to the menu dropdown
5. Press the Add row button to add the row.

First Row Settings:

1. Add 4 columns with the column width set to col-3 width.

2. Click on the Add column(s) button > set the Column width class(2-12) to col-3 > press the Add button.
set columns width
3. Now you need to add subcategories to first 3 columns of first row.

4. Move to the Add subcategory option and choose the subcategory among the list and press on the Add button.
add subcategory
5. On the next step you will see this category listed at the Selected items field.

Let’s set 4th column of the first row.

6. Move to the Select static block option and add the Mega Menu Product Title Block to this column.
add static block to the menu
7. Then go to the Add Product(s) option and add any product you want to show in the Mega Menu dropdown.
add product to the menu

Check the tutorial on how to add a Simple Product.
Second Row Settings:

1. Add 2 columns with the column width set to col-6 width.

2. In order to do this, click on the Add column(s) button > set the Column width class(2-12) to col-6 > press the Add button.
set columns width
3. Now you need to add the static block to each column of the second row.
add static block
4. Move to the Select static block option and choose the Megamenu-banner-1 (for column 1) or Megamenu-banner-2 (for column 2) static block among the list and press the Add button.

5. Static block title will be listed in the Selected items field.

Add Labels

add labels
1. In order to add the label to subcategory, open subcategory settings and navigate to the Megamenu tab.

2. Enter the text for the label (new, sale or hot) in the Label option textfield.

3. When complete, tap Save.

Was this helpful?