Menu items are your website's navigation, and the primary way your customers will find what they are looking for. Mega Menus give you an opportunity to give a more visual element to your menus. You can add images, icons, several different options for links, plus they are a great way to get multi-tier navigation. Standard Menus can only have one main navigation item with one single dropdown of items below it. With Mega Menus, you can have several tiers of submenus below one main navigation item. For example: you can have a main navigation item called Customer Service and then within that menu you can show Services with a list of links, Education with a list of links, and an image for a little added eye-catcher. In this article you will learn how to add, edit and rearrange mega menu items and widgets. 


To get started login to your site's Admin.


First you will need to determine whether you have a Static menu or a Mega menu. The easiest way to determine this is:

  • Standard: The first menu will be called Main Standard (or Main Default). If you see this, please click here to view our Menu Items article.
  • Mega: The first menu will be called Main Mega Menu. If you see this, please continue with the instructions below.

In this Article

About Mega Menus (MM):


Every website comes with a pre-made Mega Menu. If you don't have one or aren't sure, email [email protected]. It is safe to say the pre-made Mega Menu will cover about 50% of your bases if you don't make any modifications to the Main Mega Menu before implementing it. Generally speaking, you could make the switch and have about an hour's worth of work to make the menu 100% applicable to your business. If you do this, a good time time of day would be the late evening when website traffic is low. Alternatively you could build out the MM to the best of your ability/knowledge and then make the switch. This is the recommended route to go. Get the menu as close as possible and then turn it on. This route will not allow you to see changes as you make them on the front-end of the website, though. 


There are two pieces to a Mega Menu (MM) on your website:

  1. Menu items
  2. Menu item widgets
    Note: You cannot add a MM item without first having created the MM widget.


Switch From a Static Menu to a Mega Menu:

If you choose to make the switch from a Standard Menu to a Mega Menu on your own, all you will need to do is change the slug in each main menu item. 

Note: This can be tricky and your menus may show out of order on the main menu Items landing page so if you need help, please email [email protected].

  • Navigate to Content > Menu Items
  • Click on the menu item you want to edit. The existing main menus are Main Standard (or Main Default) and Main Mega Menu.
  • Going from Standard to Mega - edit Main Standard (or Main Default) and change the slug to "main-standard" then edit Main Mega Menu and change the slug to "main-mega."

  • Don't forget to Save.
  • When the slugs have been changed for each menu item, go to Settings > Company.
  • Scroll down to Menu Type and from the dropdown menu, choose Mega Menu.
  • Don't forget to Save.


To Edit an Existing MM Widget:

  • Navigate to Content > Mega Menu Widgets
  • Click on the widget you want to edit
  • Make any edits you need.
    Note: Each Widget has different functionality.List of available widgets is below.
  • Don't forget to Save.

If you're not sure which widget to be edit:

  • Navigate to Content > Menu Items - Here you will see a list of all menu items
  • There is a column called Widget Name where you can see what widget is being used for that section for the menu. Click on the name of the widget and it will take you straight to the edit screen for that particular mega menu widget.


To Create a New MM Widget:

  • Navigate to Content > Mega Menu Widgets
  • On the top-right of the screen, click on Add Mega Menu Widget
  • Choose a Widget Name that will help you find this widget when you need to add it to your menus. This will not show to a customer, it is only for your ease of use.
  • The Slug will fill itself in, you don't have to touch this field.
  • Choose which widget Type you want to use based on what you want to show in the menu.
    Note: Each Widget has different functionality. Recommendations on how to use each widget are below.
  • Click Save and Continue to get the specific widget options to show up below the section pictured above.
  • Under the header called Widget you will see all of the specific editing options for each widget.
  • Make any edits you need.
  • Don't forget to Save.


To Add a New MM Item to the Main Navigation:

  • Navigate to Content > Menu Items
  • From here, determine whether this menu is going to be the first item in the main navigation or if it is going to be a dropdownbelow an existing main menu item. 
    • If this is going to be a main navigation item that sits at the very top of the page (meaning a dropdown will come off of this item) then you'll go to the Add button dropdown at the top-right of the page and select Menu Item. From here you can follow the instructions listed in the Menu Items article.
    • If this is going to be a dropdown menu item off of an existing main menu item then you'll go to the Add button dropdown at the top-right of the page and select Mega Menu Item. From here you will follow the instructions below.
  • From the Mega Menu Widget dropdown, choose the widget you want to show in this section of your Mega Menu. 
  • From the Widget Columns dropdown, choose how much space you want this section to take up in the drop-down on the front-end.
    You have 12 columns to work with total per dropdown. Your average mega menu widget needs at least three columns ("3 (25%)"). Do not exceed twelve columns. Example of column spacing is below.
  • Use the Position and Relative To dropdowns to determine where your menu item lives in relation to all the other menu items.
  • Make sure to Save.


To Connect a MM Widget to a Pre-Existing MM Menu Item:

Note: You must have already created the widget.

  • Navigate to Content > Menu Items
  • Click on the Menu Item you wish to update.
  • From the Mega Menu Widget dropdown, choose the widget you want to show in this section of your Mega Menu.
  • Consider updating the Widget Columns dropdown depending on the content you want to display in this MM section.
    Example: Are you adding a widget that will showcase 40 brands? Then you'll definitely need more than three columns of space, otherwise your menu will be several inches tall and block majority of the content behind/below it.


MM Widget Examples

The following article explains each different mega menu widget option and how they are best utilized. Please review this article to Learn More.


Available MM Widget options include:

  • Brands
  • Code Editor
  • Gemstone Shapes
  • Gemstone Budget
  • Gemstone Max Size
  • Images
  • Item Categories
  • Item Types
  • Page Category Links
  • Page Links
  • Text


MM Widget Column Examples

The following references the below screenshot.


The Type Column

In the Type column of every child you will see a number and in parenthesis a percentage. This number represents how many columns this particular mega menu item is going to take up and the percentage represents how much of the total 100% available the mega menu item is going to take up.


Engagement Menu: In the Type column for each child you see a 4. There are three 4's so 4 + 4 + 4 = 12. 12 columns total to work with.


Wedding Menu: In the Type column for each child you see different numbers. 4 + 5 + 3 = 12. 12 columns total to work with. This was done because there were several wedding band designers that would have been squished with only 4 columns of space.




Below is a visual reference of the 12 columns you have to work with. THIS REFERENCE IS NOT TO SCALE.