This tutorial will help you How to Config Magento 2 Menu Item for Magento 2 Store by our Magento 2 Mega Menu Extension.
There are 8 Tabs which need to Config Magento 2 Menu Item:
With this configuration, you can set the width of dropdown, position, animation, color, backgroud with image or not, menu types, …
In order to config correctly position of the menu which is displayed well on Frontend Menu. Follow us to check Magento 2 Menu Structure:
Table of Contents
At general information Tab, you should fill all information relate name, type of menu, icon, group or not, dimension, screen width, etc
1.1 Name: Set menu title. It maybe Women, Men, Fashion, etc.
1.2 Link Type: Category Link or Custom Link.
+ Category Link: It allows to add specific category link to menu. You can choose one of Magento 2 Category in your store. View more How to Add Category Link to Menu in Magento 2
+ Custom Link: Allows to enter your custom link, it supports Magento 2 Shortcode: If the link is http://domain.com/contact -> Magento 2 Shortcode is {{store url=â€contactâ€}}Â
1.3 Link Target:
+ Load in a new window
+ Load in the same frame as it was clicked
+ Load in the parent frameset
+ Load in the full body of the window
1.4 Show Icon:Â Enable to “Yes” or not. Upload Icon, hover icon for this item then update icon position
Hover Icon:
Choose Icon Position: Left or Right
Icon CSS Class: Allows to add class CSS for icon to make it more different.
1.5 Caret, Hover Caret: Insert Icon & Hover Icon Caret for Menu
1.6 Disable Dimensions:Â Enter the Width (pixel) want to disable, menu will be hidden when screen width less than the field value.
Bootstrap 3 Media Query Breakpoints:
Large Devices, Wide Screens: 1200px
Medium Devices, Desktops: 992px
Small Devices, Tablets: 768px
Extra Small Devices, Phones: 480px
iPhone Retina: 320px
Status: Enable/Disable Item
2.1 Is Group:Â
Set Yes/No
There are 2 choices: Yes/No
+ “Yes”: All Sub-menu items will be shown-off in the same level of parent menu without hovering on parent menu.
+ “No”: All Sub-menus are not shown with the same parent menu level. When hovering on parent menu, sub-menu Items just appears.
2.2 Width: Set Width for Menu Item Dropdown:
Ex: 400px, 100%
2.3 Show Effects: Set Animation of dropdown effect: It includes 9 groups & 44 effects
2.4 Show Duration (s): Set total time of effect in the second.
2.5 Alignment: There four alignment types for the menu content to appear
+ From left menu: menu dropdown content will appear from the left of menu bar to the right
+ From right menu: menu dropdown content will appear from the right of menu bar to the left
+ From left item: menu dropdown content will appear from the left of menu item
+ From right item: menu dropdown content will appear from the right of menu item
2.6 Background Options: background color, background image, background repeat, background position x, background position Y.
2.7 Background Color:
+ Background Image: Set Image Background for Dropdown Menu
2.8 Insert Image:
+ Background Repeat:
+ Background Position X:
+ Background Position Y:
2.9 Inline CSS: Add custom code CSS for this item. Semi-colon separated.
5.1 Enable: Yes/No
5.1 Width: Set the width of main content. (percentage or pixel)
5.3 Main Content Types:Â There are 4 content types:
5.4 Child Menu Column: Insert the number of columns childmenu.
5.5 Content: Supports WYSIWYG editor: insert HTML code, Video(youtube, vimeo,…), Magento widget.
Customize the style of menu item: color, background color,…You will set color for:
When you config all above information, you should click “Update” before “Save & Edit” to ensure your content is saved successfully.
Then Clear Cache: System -> Cache Management -> Select All -> Submit
This is all our blog “How to Config Magento 2 Menu Item”. We hope that it will help you well in the menu configuration for Magento 2
Magento 2 Mega Menu Tutorials
Some other extensions you maybe interested in
Related Posts
In the manufacturing industry, staying ahead of the competition is essential for long-term success. As…
In the current virtual world, mobile apps have become a crucial part of our daily…
Strapi CMS for Magento 2 Headless Projects is transforming how e-commerce owners manage complex content…
SaaS SEO Services have become a crucial component for businesses in today’s highly competitive SaaS…
En a digital-first economy, Software-as-a-Service (SaaS) businesses need to be visible. Without visibility, even the…
After all, in business we're living by a binary decision. As the world becomes more…