In Magento 2, this Magento 2 Mega Menu comes with tons of powerful features. By Drag n Drop Features and tons of pre-made styles in Mega Menu, it helps to create a wide range of rich menus. It is very ease to setup, use & customization. One of the reasons why You Should choose Magento 2 Mega Menu on Landofcoder is that it supports to create 6 Types of Menus in Magento 2.
So in terms of our blog, we will show you 6 Styles to Create Magento 2 Menu:
Follow us! Let’s discover “How to Create Magento 2 Menu with 06+ Styles by Magento 2 Mega Menu Extension” – Landofcoder.
Note: This Blog ensures you Create Magento 2 Menu with style. You have to know these steps:
+ How to Create Simple Menu Magento 2 ?
+ How to Add Category Link to Menu in Magento 2 ?
Table of Contents
Being the first style in Magento 2, Anchor Text Menu in Magento 2 Mega Menu is the most simple style in both style and use.
Start to Create Magento 2 Menu with Anchor Text Menu Style:
You have 2 styles:
Add New Menu -> Fill General Menu Information:
Save & Continue Edit -> View it on Frontend to see How it Display.
Add New Menu -> Edit -> Insert Widget -Settings -> Update -> Save & Continue Edit
+ At General Settings:
Link Type: Category Link
Category: Choose The Category link you want to link -> Update
Content: Choose Dynamic Content Tab
At Subcategory (Child menu) and Click “Edit”
Main Content Type: Choose “Content”
Widget Type: Ves Megamenu: Products
Widget Options: Choose categoies: Select categories you want
Number of Item: 20
Enable: Yes
Number of Item per Column: 2
Margin: 1
Auto Width: Yes/No
Autoplay: Yes/No
Auto HoverPause: Yes/No
Show Dots Navigations: Yes/No
Show next/prev buttons: Yes/No
-> Insert Widget -> Update -> Save & Continue Edit
Child menu (Submenu) is the secondary menu. It is a list of choices that is part of another list of choices. If you enable the field “Is Group” is “Yes”, both menu & submenus items will be displayed in the same level.
Create New Menu -> Add Submenu – the same steps to create single menu in Magento 2
You need to add parent menu A -> Submenu (secondary menu) and child menu
And Edit menu A:
+ At Dropdown:
Set Width: 100%
And “Update”
At Menu 1:
Click Edit -> At General Information -> Is Group: Choose “Yes”
And “Update”
At Main content You can set 1 or 2: -> “Update -> Save & Continue Edit”
View How it Displayed at the Frontend.
Add New Menu -> Name Menu -> Update
-> At Main Content -> Choose “Main Content Type” = “Content”
4.1 Add Custom Menu with HTML Video:
Copy HTML VIDEO:
Choose HTML Element:
Insert Video HTML: -> Update -> Update
At Dropdown:
Width: 500px
Choose Alignment: From right menu
Classes: Pull-right
-> Update -> Save & Continue Edit
Add New Menu -> Name Product -> Update
Main Content -> Main Content Type: Choose Content
At Content HTML -> Insert Widget -> Widget Type: Choose Ves Mega Menu Products
Widget Options:
Choose Categories: All
Number Item: 20
On Owl Carousel Settings:
Item Settings:
Then Click ” Insert Widget” -> Update
-> Update -> Save & Continue Edit
Create New Menu -> Update -> Save & Continue Edit -> Update
Edit Menu -> Edit:
Main Content:
Main Content Type: Sub-categories
Parent category: Choose Category for Parent
Child Menu Column: 2
Dropdown:
+ Set Width: 400px
+ Alignment: From right Items
-> Update ->Â Save & Continue Edit
System -> Cache Management -> Sellect All -> Submit
This our blog “Create Magento 2 Menu with 06+ Styles easily by Magento 2 Mega Menu Extension – Landofcoder. We hope this blog helps you enrich your menu content & style.
Magento 2 Mega Menu Tutorials
Some other extensions you maybe interested in
Related Posts
The way companies exchange data with their trading partners can make or break operational efficiency.…
Modern websites are built to be fast, dynamic, and secure. At the same time, developers,…
The blockchain development landscape has exploded with opportunities. Whether you're building decentralized apps, smart contracts,…
Imagine a device that notifies you about all-day activities, reminds you to take your pills,…
How do you like the new “liquid glass” design on your iPhone? The latest iOS…
As Fortinet devices approach the Fortinet End of Life of their supported lifecycle, many security teams find…