Getting Started
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.
Edit Mode
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.
General
Position
- Fixed
- Inline
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.
Z-Index
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.
Max width
The max width option simply controls the maximum width of the menu itself.
Margin
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.
Breakpoint
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.
Main Menu
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.
Item Padding
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.
Mega Dropdowns
Here you will find the majority of styles for editing the dropdown menus.
Content Align
This refers to the text alignment for each column of the dropdown menus. You can basically think of it as Text Alignment
Min Height
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.
Column Padding
These two inputs control the amount of vertical/horizontal padding aroudn the outside of each column
Item Padding
These two options control the amount of padding around the Mega Menu Item stacks such as links/titles/text/ or stacks.
Link Size
This simply controls the font size of Mega Menu Item links in the dropdown menu.
Text Size
This simply controls the font size of Mega Menu Item text in the dropdown menu.
Title Size
This simply controls the font size of Mega Menu Item titles in the dropdown menu.
Title Spacing
This controls the amount of space below each Mega Menu Item title.
Title Weight
Here you can choose whether titles be bold or just normal.
Title Case
Here you can choose whether titles be uppercase or just normal case.
Icon Spacing
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.
Logo Size
The font size of the logo
Toggle Size
The Size of the Toggle Icon (The outer size of the icon is calculated automatically)
Colors
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.
Logo Color
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.
Dropdown Titles
The text color of Mega Menu Item Titles in mega Dropdowns.
Title Border
The border color of Mega Menu Item Titles in Mega Dropdowns.
Thickness
This controls the thickness of the border for Mega Menu Item Titles.
Dropdown BG
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)