Dark Mode
When enabled you'll be given additional options throughout the Mega Menu stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.

Full-width Inner Container
When enabled the contents of your navigation will extend to the full-width of your navigation.

Inner Max-Width
Set the maximum width for the inner contents of the Navigation Bar. This includes the branding elements as well as the navigation items.

Site Title
Enabling the Site Title allows you to manually enter a string of text that will be added to the navigation bar as your site title.

Site Title Text
Used to enter either your site title, or other text you’d like to see appear in your navigation bar.

Title Spacing
Allows you to specify padding to the left- and right-hand side of your site title. The spacing can be set separately on each side.

Link Site Title
Allows you to add a link to your site title text. This is most often used to link to the home page of your site.

Site Title Color
Set the color of your Site Title text.

Mobile
This determines the font size of your Site Title at the Mobile breakpoint.

Tablet
This determines the font size of your Site Title at the Tablet breakpoint.

Desktop
This determines the font size of your Site Title at the Desktop breakpoint.

Font
Choose whether to have your site titletext adopt the font settings from the Control Center stack or to use the Typeface stack for your font choices.

The default values and settings for headers on your page can be setup within the Foundry Control Center stack. There you can set font sizes, weights, colors and more.

Font Weight
Choose what weight you wish your font to be. The higher the number the more bold the font will be. If using the Typeface stack for your font choice be sure that you are loading the font weight you wish to use within the Typeface stack.

Italic
When enabled your site title will be italicized.

Logo
Enable this feature to include a logo image in your navigation bar.

Logo Image Type
Allows you to choose between using a drag-and-drop image or a remote based image for your logo. When you choose which type you'd like to use you'll be given the appropriate controls for adding your logo image.

Site Logo Alt Tag
Allows you to add an ALT tag to your site logo for SEO purposes.

Link Site Logo
When enabled you're able to add a link to your Site Logo.

Alignment
You can opt to place your Branding content on either the left- or right-hand side of your navigation bar. This includes both the Site Title and the Logo.

Navs Bar Colors
Choose the color for both the background and border of your navigation bar.

Blur Background
Enabling the Blur Background feature will create a nice blurred effect for any content that shows through the navigation bar background. To see the blurred content showing through the navigation bar you will need to choose a translucent background color for your navigation bar background.

Border
Opt to include a thin border around your navigation bar.

Round Corners
You have the ability to round the corners of your navigation bar. You can choose to set the border radius for all of the corners the same, or by clicking on the + sign you can set each corner its on unique value.

Shadow
Allows you to add a drop shadow to the navigation bar. Enabling this feature lets you choose both the color and size of the shadow.

Mobile
The height your navigation bar will be at the Mobile breakpoint.

Tablet
The height your navigation bar will be at the Tablet breakpoint.

Desktop
The height your navigation bar will be at the Desktop breakpoint.

Match Items to Nav Bar Height
This feature allows you to have your navigation items extend their background the full height of the navigation bar. Doing so allows for the active and hover styling to extend to the top and bottom edge of the navigation bar.

Alignment
You can set the alignment of your navigation items to the left- or right-hand side of the navigation bar, or opt to center the them. Centering the navigation items will forcibly hide your navigation bar branding.

Navigation Item Text Colors
Allows you to set the normal and active colors for your navigation bar’s text.

Active Bkg Color
You can choose to set a background color for the active navigation item.

Tablet Corners (Desktop & Tablet)
Allows you to set how round you would like the corners of your navigation item backgrounds to be.

Font
Choose whether to have your navigation items adopt the font settings from the Control Center stack or to use the Typeface stack for your font choices.

The default values and settings for headers on your page can be setup within the Foundry Control Center stack. There you can set font sizes, weights, colors and more.

Items Weight
Choose what weight you wish your font to be for the normal, non-active navigation items. The higher the number the more bold the font will be. If using the Typeface stack for your font choice be sure that you are loading the font weight you wish to use within the Typeface stack.

Active Weight
This is the same as the Items Weight setting. The only difference is that it is applied to the active navigation items.

Font Size
Allows you to choose the size of the font for your navigation items. You can set a different font size for them at each of the three responsive breakpoints.

Trigger Type
Allows you to specify if you'd prefer for drop down navigation items to be shown when your visitors click on a parent navigation item, or when they hover over a parent navigation item.

Close When Another Is Opened
When enabled an open drop down will be closed automatically if your visitor opens a different drop down item. This setting has no affect over parent navigation items when using the Hover Trigger Type. This only applies to the Click Trigger Type.

Font Size
Allows you to choose the size of the font for your drop down navigation items. You can set a different font size for them at each of the three responsive breakpoints.

Top Offset
This settings allows you to vertically offset the top of the drop downs. Using a positive value moves the drop down menu downwards. A negative value moves it upwards.

Round Corners
Allows you to adjust the roundness of the drop down navigation's corners.

Animation Style
Allows you to choose from a variety of different animation styles for animating the drop down in, and out of view when triggered by your visitors.

Animation Speed
This is the duration value for the animation. The entire animation will start and complete within this amount of time. The smaller the value, the quicker the animation occurs.

Alignment
Allows you to choose whether the toggle icon should be placed on the left, center or right of the toggle bar at the mobile breakpoint.

Branding
When enabled you're able to choose to show the Logo and / or Site Title at the mobile breakpoint within the toggle bar. These items are placed on the left, and the toggle icon is moved to the right, overriding the Alignment setting above.

We know that often times you wish to have a bit of different styling for your mobile navigation. The Mega Menu stack offers the following alternative color pickers for styling the navigation at the Mobile breakpoint.

Toggle Icon
Allows you to select an icon that will be used for the mobile toggle, which is used to show / hide the navigation at the mobile breakpoint.

Toggle Bkg
Set the normal and hover colors for the background of the mobile navigation toggle button.

Toggle Icon
Set the normal and hover colors for the mobile navigation toggle button’s inner icon.

Nav Item Text
Set the normal and active colors for the text within the mobile navigation.

Active Bkg Color
You can choose to set a background color for the active navigation item at the Mobile breakpoint.

Navigation Bkg
Set the background found behind the navigation items in your mobile navigation dropdown.

Drop Down Shadow
These settings allow you to enable a drop shadow for the mobile navigation's drop down. When enabled you're able to set the drop shadow size and color.

Include Button
Enable to add a Foundry style button to the top level navigation bar. The button can be styled and linked, as well as aligned using the settings below.

Button Location
The button can be placed on either the left- or right-hand side of the navigation bar.

Button Label
The text that will appear on your button.

Button Link
Allows you to set where you wish this button to be linked to.

Button Size
Choose the size of your button. You can opt of a Small, Standard or Large button size.

Button Style
Set the color of the button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers.

Block Button
Enable to make the button span the entire width of the its section within the navigation bar. The button’s width is flexible when enabled and will size down to fit the available space.

Outline
When using one of the color swatch presets you can use the Outline feature to inverse the button’s style.

Tooltip
Add a popup tooltip to your button. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

Desktop & Tablet Sections
When the button is included in the Mega Menu navigation bar the bar gets divided into sections. These sections are treated much like the columns stack and divided into two areas measured in units. The full navigation bar is 12 responsive units wide. Whatever space is not used up by the button section (which has a maximum of 6 units in size) is used by the navigation items. You’ll need to adjust accordingly based on your button text size and your navigation items.

You can adjust the button section size at both the Tablet and Desktop breakpoints. It is unnecessary to set a section size for the Mobile breakpoint as the button section will always appear below the navigation items in the mobile drop down.

Auto Detect Active Page
Within a the Mega Menu you can manually select that a navigation item is the Active Page. This is fine, but would cause you to need manually maintain a different navigation bar on each individual page. It you only have one or two pages, this isn’t a problem. For larger pages this may be tiresome. This is where the Auto Detect option comes in handy. Auto Detect looks at the current page URL and then scans all of your navigation items to find the one that matches the current page URL. It then marks that navigation item as the current Active Page.

Collapse In Edit Mode
Since the Mega Menu is built manually through a series of child-stacks the content within Edit Mode can be quite vast. Enabling this feature collapses the Mega Menu content in Edit Mode so that it doesn’t take up a lot of space while you’re trying to work on the rest of your page.

Z-Index
Allows you to specify the z-index value for the Mega Menu navigation bar. There are two possible settings. One for its normal display and one for when the navigation is in sticky mode.

Sticky Navigation
Use this feature to allow the navigation to remain anchored to the top of the browser window as your visitor scrolls down the page. The navigation becomes "sticky" and anchors itself to the browser when the visitor has scrolled down the page enough so that the navigation touches the top of the browser window.

Un-Stick Mobile Navigation
Allows you to opt to have a sticky navigation at the Desktop and Tablet breakpoints, but disable the sticky navigation at the mobile breakpoint. This can be used when you have exceptionally long drop down navigation items that may overrun the shorter mobile displays.

Use Alternate Color When Stuck
Enabling this feature allows you to set a separate set of colors for your navigation bar when it is stuck in place. The Alternate colors take affect after the visitor has scrolled a specified distance, which you get to choose. You can set alternate colors for:

Pair with Parent Banner
If you place a Mega Menu navigation bar inside of a Banner stack you can have the navigation bar attach itself to either the top of bottom of the banner area by enabling this feature.

The Mega Menu stack relies on a series on internal child-stacks to allow you to manually build out your navigation. Each child stack has a large number of its own options as well. Below we touch on each of these child-stacks’ options.