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.

Branding
You can add branding, which includes your site title and / or logo to your navigation bar.

Branding Type
Choose to either use the Site Title, as you’ve entered it into your project settings in RapidWeaver, or use custom text in place of a Site Title.

Site Title Tag v2
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.

Branding Text
Choose the color for your Branding Text here.

Hide Text At v2
Allows you to choose which breakpoints your logo will be seen / hidden at.

Logo
Allows you to use the site logo you’ve added to your project settings in RapidWeaver or to use your own custom image.

Starting in Foundry v2 you can also choose to use a custom image file, and are given the choice of using the normal drag-and-drop method or opting to use a remote image on your server via a URL. v2

Logo Alt. Tag v2
Allows you to set an Alt Tag for your Logo image file when using the Custom or Custom Remote logo type.

Hide Logo At...
Choose which breakpoints you wish to see your branding logo. Choose any combination of Mobile, Tablet or Desktop. Helps when working around longer Site Titles.

Alignment
Opt to place your branding on either the left- or right-hand side of the Navigation Bar stack.

Use Override Font
This option lets you choose a custom font for your branding text, whether that be your Site Title or Custom text. When this feature is disabled the font for your branding text is pulled from the Control Center headers settings.

Override Font
Select which font you wish to use to override the branding text. You can select from a few preselected fonts, or you can opt for a custom font. A custom font can be normal web-safe fonts or you can use Google Fonts. If you opt for Google Fonts the code to call the font from the Google server is automatically generated.

As of v1.2.5.0 we also offer the ability to use the Typeface stack to insert Google Fonts, Typekit fonts and standard web fonts into your page. You can use Typeface for your Branding by selecting one of the Typeface settings from the Override Font dropdown.

Fallback Font
Allows you to specify a fallback when using the Override Font feature. This lets browsers have a standard font to default to if the visitor’s browser does not support a font or if the visitor does not have that font installed. The standard fallback fonts would be either serif or sans-serif.

Weight
Set the font weight for your branding text with a simple slider.

Italic
When enabled your Branding Text will have an italicized style applied to it.

Mobile, Tablet and Desktop Font Size
Set the font size for your branding text at each of the three breakpoints. This allows you to shrink the branding text down to better fit on smaller devices.

Uppercase
Force your branding text to appear as all uppercase letters.

Full-Width Inner Container
Forces the contents of the Navigation Bar to be fully fluid and not be contained by a max-width setting.

Padding
When using the Fluid-Width Inner Container feature of the Navigation Bar stack you can specify the padding that is applied to the left- and right-hand sides of the navigation bar at both the Desktop and Tablet breakpoints.

Inner Max-Width
Set the maximum width for the inner contents of the Navigation Bar, which includes the branding and navigation items.

Alignment
Choose to place the navigation items on the left- or right-hand side of the navigation bar. You can also center the navigation items if you choose. Doing so however automatically hides the branding no matter what settings you have chosen for your branding items.

Mobile, Tablet & Desktop
Set a different height for the Navigation Bar at each of the three breakpoints.

Mobile, Tablet & Desktop
Select a different font size for your navigation items as each of the three breakpoints.

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

Font Weight v2
Use this setting to adjust the font weight of your Navigation 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.

Navigation Bar Colors
Customize the look and feel of the Navigation Bar itself by selecting both a background and border color. You can use translucent colors by opting to make use of the opacity slider in the RapidWeaver color picker.

Border
Allows you to adjust and style the border applied to the Navigation Bar.

Round Corners
Add rounded corners to the Navigation Bar. Use the same border radius value on all four corners or choose to define a different roundness value for each individual corner.

Drop Shadow
Adds a subtle drop shadow to the Navigation Bar to set it apart from the rest of the page’s content.

Item Spacing
Customize the spacing between each of your navigation items. Helps in making sure your navigation fits and is easily legible.

Navigation Text Color
Use color pickers to choose the normal and active colors for your navigation items.

Bold Active Page Title
Allows you to increase the visibility of the active page’s navigation item text.

Uppercase Nav Items
Enabling this feature uppercases the text of all of your navigation items in your Navigation Bar stack.

Use Background Indicator
Allows you choose to have a background color behind active navigation items. The background can also be seen when visitors hover over navigation items. You can use a color picker to set the background color of the indicator. You can also set the padding around the text within the indicator as well as define whether or not to have rounded corners.

Use Underline Indicator
In addition to, or instead of, you can use opt to use an Underline to indicate which page the visitor is currently on. We provide a color picker for this indicator as well as the ability set its size. You can choose to set the size of the Underline from 1 to 10 px in size.

Drop Down Navigation Colors
Set the drop down menu’s background, border, normal and active text.

Use Background Indicator
Enabling this feature allows you to set a background color for the active item as well. This active item background is also used for when a visitor hovers over navigation items in the drop down menu.

Trigger Type v2
Choose whether to have the drop down menus triggered by a click from the visitor, or opt to have them revealed when the user hovers over the drop down parent item.

Close When Another is Opened
Enabling this feature force any currently opened drop down menus to close when your visitor clicks on another navigation item that has a drop down menu.

Parent Indicator v2
Choose which icon you'd like to have added to parent items in the Navigation Bar to indicate that they contain a drop down with child navigation links.

Nav Item Height
Set the height you wish your navigation items to be at the Mobile breakpoint.

Custom Mobile Nav. Bar Bkg.
You can choose to customize the navigation bar’s background and border at the Mobile breakpoint. When in enabled you will receive two color pickers to make these adjustments.

Mobile Toggle
Allows you to define the color of the toggle that opens the navigation at the Mobile breakpoint.

Mobile Navigation Colors
Set the colors of the normal background and text elements as well as the active background and text for your navigation when viewed at the Mobile breakpoint.

Use Background Indicator
Enabling this feature allows you to set a background color for the active item at the Mobile breakpoint. This active item background is also used for when a visitor hovers over navigation items at this breakpoint.

Toggle Icon
Allows you to choose which icon you'd like displayed at the Mobile breakpoint to indicate to your visitors that there is a navigation that they can access.

Small Header
Allows you to set the color for Small Headers, if used in your Navigation Bar. See below for more information on Small Headers and Divider Lines.

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.

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.

You can add small, non-clickable headers to your drop down menus. You can do so by creating an empty, blank page in your project as a child page where you wish this small header to appear. Then insert this code snippet as that page’s title and edit the label:

Much like the Small Header above, you can add a divider line into your drop down menus in the Navigation Bar stack. You can do so by creating an empty, blank page in your project as a child page where you wish this divider line to appear. Then insert this code snippet as that page’s title: