How to edit and add an option in Mega Menu

You are here:
< All Topics

For the purpose of adding/ editing mega menu from the Kartify backend. Follow the below mentioned steps to edit the settings to add/ edit mega menu option in the website header

Step 1: From the navigation bar on the left select Storefront Design.

Step 2: Select Custom Menu from the list options

Step 3: Once you navigated to editing mega menu page, in the header instead of default select the brand for which you wish to make changes and click on Edit Menu in the same header.

In case the store is not there in the list, then you need to add new menu
Click on Add Menu> insert store name> Click on Add skin

Step 4: To add a new item click on Add New Item as shown below. To modify an existing item click on the green coloured edit icon next to it.

Basic configuration

  1. Status: set it to enable/disable based on preference
  2. Display on Mobile: if the mega menu should be displayed on mobile browsers (yes/no).
  3. Position: position of the mega menu
  4. Layout: select (All Page – Store Name) as it will appear on all pages
  5. Sort Order: decides the order in which mega menu appears in a layout. Mega menu with the lowest sort order appears first in a layout

Design configuration

  1. Orientation: Select the orientation of mega menu in the page, it can be horizontal or vertical
  2. Search Bar: tick to enable
  3. Navigation text: No value is to be added
  4. Expand Menu Bar Full Width: this will always be “No”
  5. Home item: this will stay always disabled 
  6. Home text: No value is to be added

jQuery Animations

  1. Animation: this is set as per brands requirement put default value as “Slide”
  2. Animation Time: Put default value as “500ms”

Cache Configuration

  1. Status: should be “Enabled”
  2. Cache Time: Default value is “1” (in hours)

Step 5: Once you choose to either add a new item or modify an existing item you will be redirected to the same page as below. Fill/change the relevant fields according to your preference

Create New Item

  1. Name: name of the item
  2. Description: description of the item
  3. Label: label of the item
  4. Label text colour: colour of the label
  5. Label background colour: colour of the background of the label
  6. Icon: icon for the item
  7. Link: link to redirect the user when clicked upon
  8. Link in new window: if the link should be opened in a new tab
  9. Status: set it to enable/disable based on preference
  10. Display on Mobile: if the mega menu item should be displayed on mobile browsers (yes/no).
  11. Position: position of the item in the mega menu
  12. Submenu width: width of the submenu, This can be in Pixel (px) or percentage(%)
  13. Display submenu on: when the submenu should be displayed
  14. Submenu background
  15. Submenu background position: Default value will be “Top left”
  16. Submenu background repeat: Default value will be “No Repeat”

Content item – content of these fields will only be displayed if the menu be set as submenu.

  1. Content width: it can be 12/12 or as per the requirement it can change on the basis of rows and columns are required for submenu (only) in Content item
  2. Content type: This can we HTML code or Linking on the basis of the product ID’s or Category ID’s

Step 6: Save the changes by clicking on the save button in the bottom of the page.

Clear cache and check changes will reflect on your website!

Previous How to Add/Modify a Banner Slider
Next How to edit Custom Module
Table of Contents