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

Inner Width Type
You can choose between a fixed-width for the inner portion of the Nav Bar Pro stack or make it fluid. Fluid allows the contents of the stack to stretch out to the full-width, while fixed-width option allows you to set your own maximum width for the inner content.

Inner Max-Width
Set the maximum width you desire for your navigation items when using Fixed-Width as your inner container type.

Height
Set the height of the navigation bar at each of the three breakpoints. This allows you more control and flexibility over your design.

Rounded Corners
Used to set the border radius for the navigation bar at each of the three individual breakpoints. The border radius amount is applied to each of the four corners.

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. Nav Bar Pro allows you to style various aspects of the navigation differently when the navigation bar is "stuck" and when it is not.

Background
Used to set your navigation bar's background color.

Sticky Background
Used to set your navigation bar's background color when the navigation bar is stuck to the top of the browser window. This is applied only if you have enabled Sticky Navigation.

Enable Shadow
Allows you to apply a drop shadow to the navigation bar when enabled.

Shadow Size, Offset & Color
Adjust the styling for your drop shadow when you've enabled the shadow feature.

Enable Sticky Shadow
Allows you to add a drop shadow to the navigation bar when it is "stuck" to the top of the browser window. This allows you to choose whether you have a shadow while the navigation is "stuck" and how it should be styled.

Shadow Size, Offset & Color (Sticky)
Adjust the styling for your drop shadow when you've enabled the sticky shadow feature. These stylings will be applied when the navigation bar is "stuck."

Nav Bar Pro is broken up into 3 different zones. Zone 1 is on the left, zone 2 is in the middle and zone 3 is on the right. These zones can contain different content, have set sizes, as well as be hidden at different breakpoints. This gives you a high level of customization.

Zone 1
This section contains three drop downs for selecting Zone 1's content at each of the three responsive breakpoints. Each of the breakpoints can be set independently to one of the following choices:

Zone 1 Min-Width
Use these three vales to set a minimum width for Zone 1 at each of the responsive breakpoints. This allows you to ensure that the content in Zone 1 will always be at least this wide so your content is visible.

Note: Zone 2 bases its width off of the remainder from Zone 1 and Zone 3.

Zone 1 Alignment
Allows you to set the alignment of Zone 1's content to be left, center or right. This alignment is relative to the Zone's location and width. You can set the alignment uniformly or independently at each of the three responsive breakpoints.

Zone 2
This section contains three drop downs for selecting Zone 2's content at each of the three responsive breakpoints. Each of the breakpoints can be set independently to one of the following choices:

Zone 2 Alignment
Allows you to set the alignment of Zone 2's content to be left, center or right. This alignment is relative to the Zone's location and width. You can set the alignment uniformly or independently at each of the three responsive breakpoints.

Zone 3
This section contains three drop downs for selecting Zone 3's content at each of the three responsive breakpoints. Each of the breakpoints can be set independently to one of the following choices:

Zone 3 Min-Width
Use these three values to set a minimum width for Zone 3 at each of the responsive breakpoints. This allows you to ensure that the content in Zone 3 will always be at least this wide so your content is visible.

Note: Zone 2 bases its width off of the remainder from Zone 1 and Zone 3.

Zone 3 Alignment
Allows you to set the alignment of Zone 3's content to be left, center or right. This alignment is relative to the Zone's location and width. You can set the alignment uniformly or independently at each of the three responsive breakpoints.

Auto Min-Width when Zone 2 is Hidden
Enabling this setting will automatically set Zone 1 and Zone 3's minimum widths to 50% whenever Zone 2's content is set to None.

Show Zone Borders
Enabling this feature is a good way to see how wide your Zones are in Preview Mode. This can help you plan out your layouts at each of the three responsive breakpoints. Be sure to disable this feature before publishing your site!

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.

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.

Font Size
Allows you to set the font size for your navigation items at each of the three responsive breakpoints.

Item Text
Customize the color options for Normal, Active and Hovered text for your navigation bar.

Sticky Item Text
Customize the color options for Normal, Active and Hovered text for your navigation bar when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Item Background
Customize the background color options for Active and Hovered items in your navigation bar.

Sticky Background
Customize the background color options for Active and Hovered items in your navigation bar when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Horizontal Padding
Allows you to refine the horizontal padding for your navigation items at each of the three breakpoints.

Vertical Padding
Allows you to refine the vertical padding for your navigation items at each of the three breakpoints.

Rounded Corners
Set the border radius for your navigation items at each of the three breakpoints to customize their look even further.

Border on Hover
When enabled you are given the ability to adjust the border size and color for hovered navigation items. You can adjust each side on the items individually. You are also given the ability to set a color for the border when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Site Title
Insert your site's title, or other text that you'd like to have in the navigation bar here.

Site Title Color
Use a color picker to customize the site title for your navigation bar.

Sticky Title
Use a color picker to customize the site title for your navigation bar when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Site Title Link
Allows you to add a link to your Site Title branding in your navigation bar. Most of the time, if using this feature, you'll want to link your Site Title to your Home page.

Site Title Tag
Allows you to customize which HTML tag is wrapped around your Branding Text. The default is an H1 tag, but you can choose from H1, H2, H3, H4, H5, H6 or a SPAN.

Font
Allows you to choose to use the Base Font assigned in the Foundry Control Center or to assign a Typeface based font to your Branding.

Font Weight
Use this setting to adjust the font weight of your Branding text when you've assigned it a Typeface font. If you're using the Control Center's Base Font instead of a Typeface font your font weight will be set to match the Base Font's settings.

Uppercase
When enabled your branding text will be all uppercase.

Logo Image Type
Choose between using the normal drag-and-drop method or opt to use a remote image on your server via a URL for your logo.

Custom Logo Height
When enabled you are given the option of setting a specific height for your logo at each of the three breakpoints. In addition you're then also give the ability to configure an offset from the top of the navigation bar at each breakpoint. This allows refined control of the display of your logo image.

Icon
Choose the icon you'd like to use to signify the drop down toggle trigger for your navigation bar.

Toggle Color
Select a color for your drop down trigger's icon.

Sticky Toggle
Select a color for your drop down trigger's icon when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Background Color
Select a color for your drop down's background.

Sticky Background
Select a color for your drop down's background when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Round Corners
Set the border radius for your drop down to customize its look even further.

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.

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.

Item Text
Customize the color options for Normal, Active and Hovered text for your items in the drop down.

Sticky Item Text
Customize the color options for Normal, Active and Hovered text for your items in the drop down when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Item Background
Customize the background color options for Active and Hovered items for your items in the drop down.

Sticky Background
Customize the background color options for Active and Hovered items in the drop down when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Small Header
Customize the color of the small headers for your drop down.

Sticky Small Header
Customize the color of the small headers for your drop down when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Divider
Customize the color of the dividers for your drop down.

Sticky Divider
Customize the color of the dividers for your drop down when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Expanded Background
Customize the background color of the expandable sections for your drop down.

Sticky Expanded Background
Customize the background color of the expandable sections for your drop down when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Alignment
Set the alignment for the drop down items within your navigations drop downs. You can set the alignment uniformly or adjust them separately at each of the three breakpoints.

Mobile, Tablet Desktop Location
Allows you to customize how your drop down is displayed. You can adjust the location and style at each of the breakpoints. This allows you to coordinate the drop down location with your different Zone settings.

The location can be set to Left, Full, Right or None at each breakpoint. Left and Right places the drop down on the sides of the navigation bar accordingly, while the Full setting causes the drop down to span the width of the navigation bar. The None setting of course hides the drop down causing it to not appear at that breakpoint.

In From
Determine from which direction you'd like the drop down to animate in from when the visitor clicks on the drop down toggle. You can choose from Top, Bottom, Left or Right.

Scale
Determines if your drop down will start small and expand to its normal size or start larger than normal and end at its normal size. You can also opt to set the scaling animation to None.

Rotate X-Axis & Rotate Y-Axis
In addition to setting a direction and scale for your animation you can also have the drop down animate in around the x- and y-axises.

Duration
This is the span of time, measured in seconds, that it will take for the entire animation to complete. Smaller numbers means a faster animation. This defaults to 0.2 sec.

Easing Style
Choose what animation style you wish to use to reveal the contents of the stack.

Animate Items
When enabled the individual navigation items within your drop down will be animated into place within the drop down itself.

In From
Determine from which direction you'd like the drop down items to animate in from when the visitor clicks on the drop down toggle. You can choose from Top, Bottom, Left or Right.

Start Delay
This is the amount of time you'd like for the individual items to be delayed after the visitor clicks on the drop down toggle. This allows you to offset it from the animation of the drop down container. The default start delay offset is 0.05 sec.

Duration
This is the span of time, measured in seconds, that it will take for the entire animation of the drop down items to complete. Smaller numbers means a faster animation. This defaults to 0.3 sec.

Easing Style
Choose what animation style you wish to use to reveal the contents of the stack.

Size
Allows you to customize the size of the icons that can be used in the various zones. You can adjust the size of the icons at each of the three breakpoints to ensure they fit and look good in conjunction with your navigation bar's height setting.

Rounded Corners
The icons have a background applied to them. This feature allows you to adjust the border radius for the background's corners. This allows you to adjust how round the corners are at each of the three breakpoints.

Icon Color
Customize the color options for Normal and Hovered state for your icons.

Sticky Icon
Customize the color options for Normal and Hovered state for your icons when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Background Color
Customize the color options for Normal and Hovered state for your icons' backgrounds.

Sticky Background
Customize the color options for Normal and Hovered state for your icons' backgrounds when the navigation bar is "stuck" using the stack's Sticky Navigation feature.

Animate Icons
When enabled you're given the ability to have your icons animate in as the page loads.

In From
Determine from which direction you'd like the icons to animate in from when the page loads. You can choose from Top, Bottom, Left or Right.

Rotate X-Axis & Rotate Y-Axis
In addition to setting a direction for your animation you can also have the icons animate in around the x- and y-axises.

Easing Style
Choose what animation style you wish to use to reveal the icons as the page loads.

Pair with Parent Banner (Advanced)
If you place a 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.

Hide Drop Down in Edit Mode
This allows you to hide the drop down content in Edit Mode. Many times the drop down will take up a good deal of space. When you're not actively working on the drop down's content you can use this feature to free up a little space for yourself.