Mega Menu consists of 4 stacks total
- Mega Menu (Main Stack)
- Mega Menu Dropdown
- Mega Menu Columns
- Mega Menu Items
In order to get Mega Menu working, you will need to drag the mega Menu stack onto the stacks page. You will then see that it automatically adds 1 mega menu dropdown with 3 columns inside of it.
The way that Mega Menu works, is that you add a mega menu dropdown, and inside of that you add columns. Inside of those columns you can add Mega Menu items, which can be links, titles, text, or stacks!
This is the basic setup for a mega menu. Add in your dropdowns, then your columns, and then your items.
Collapse all in edit mode (checkbox)
If this option is checked all mega dropdowns will be collapsed in edit mode. This helps for condensing the stack so it doesn’t take up as much space.
Mega menu can be set to be fixed to the page, or inline with your content.
If the fixed option is checked, you will see another dropdown appear that will allow you to choose whether the menu be placed on the top or the bottom of the page.
This controls the vertical index of the menu. Increase or decrease this to place the menu on top or below other fixed items on your page.
The max width option simply controls the maximum width of the menu itself.
The margin controls the space around the mega menu. If the menu is fixed, this margin controls the amount of space between the edge of the browser window and the menu.
This can be used to offset the menu from the edge of the page.
At a certain point, mega menu becomes completely responsive, transforming into a mobile dropdown menu. This breakpoint determines the pixel width that the menu will transform.
The main menu section controls the very top level items in the menu.
Item Text Size
This controls the font size of the very top level (main) items of the menu.
Item Icon Size
This controls the font size of the icons next to the top level menu item text.
These two inputs control the amount of padding around the text/icons of the main menu items.
Main Item Font
Here you can select a font for the top level menu item text.
Here you will find the majority of styles for editing the dropdown menus.
This refers to the text alignment for each column of the dropdown menus. You can basically think of it as Text Alignment
Here you can set a minimum height for the dropdown menus. This is useful when you want to have a set height for the mega menu.
These two inputs control the amount of vertical/horizontal padding aroudn the outside of each column
These two options control the amount of padding around the Mega Menu Item stacks such as links/titles/text/ or stacks.
This simply controls the font size of Mega Menu Item links in the dropdown menu.
This simply controls the font size of Mega Menu Item text in the dropdown menu.
This simply controls the font size of Mega Menu Item titles in the dropdown menu.
This controls the amount of space below each Mega Menu Item title.
Here you can choose whether titles be bold or just normal.
Here you can choose whether titles be uppercase or just normal case.
This controls the amount of space between title/link icons and the text.
Mega Dropdown Font
Here you can specify the font family for the mega dropdowns, this includes links/titles/text/etc.
Header (Logo & Toggle)
Mega Menu comes with a built in Logo and a toggle when the menu becomes responsive. Here you will find a couple of options for custimizing the sizing of both of these.
The font size of the logo
The Size of the Toggle Icon (The outer size of the icon is calculated automatically)
With Mega Menu, all of the colors can be shared or set individually for each column. You can set the shared controls on the main Mega Menu stack. If you want to have custom colors for a particular column, then you can simply click on the column stack, and then check the (use custom colors) option, which will override the shared colors.
The color of the logo text.
Toggle Icon (Initial & Hover)
The color of the toggle icon on mobile devices
Toggle Background (Initial & Hover)
The background color of the toggle icon
Main Item Text (Intial & Hover)
The color of the top level items of the menu.
Main Item BG (Intial & Hover)
The background color of the top level items.
Dropdown Links (Intial & Hover)
The color of Mega Menu Item links in mega dropdowns.
Dropdown Text (Intial & Hover)
The color of Mega Menu Item Text in mega dropdowns.
The text color of Mega Menu Item Titles in mega Dropdowns.
The border color of Mega Menu Item Titles in Mega Dropdowns.
This controls the thickness of the border for Mega Menu Item Titles.
This controls the background of the mega dropdowns! It can be set to:
- A single color
- A gradient (two colors)
Main Menu BG
This controls the background of mega menu overall. It will control the background behind the logo & top level items, and the background of the stack on mobile devices. It can be set to:
- A single color
- A gradient (two colors)