Features

  • Add branding in the form of a site title and / or logo
  • Is capable of "sticky" navigation
  • Use custom font for branding
  • Set font sizes for each responsive breakpoint
  • Specify inner fixed-width or go full-width
  • Set left- and right-hand side padding for full-width mode
  • Pair to top or bottom of a parent Banner stack
  • Bold active page text
  • Use rounded or squared off corners
  • Use a custom image as your site logo in the Navigation Bar
  • Pages are populated automaticlly by RapidWeaver
  • Arrange page names and branding just how you like
  • Includes drop down menus for child navigation items
  • Set nav bar height at each responsive breakpoint
  • Style navigation with custom color pickers
  • Enable indicator background for active pages

Example

The navigation at the top of this page uses Foundry’s Navigation Bar stack. It is setup to use our "sticky" navigation features and we’ve modified its appearance using the Navigation Bar’s built-in styling options.

We’ve also included another example here, above, using the default styling.


Using Navigation Bar

Branding

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.

Logo
Allows you to use the site logo you’ve added to your project settings in RapidWeaver or to use your own custom image. You can also disable the site logo and still keep the site title.

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.

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.

  • Please Note: If you're using Google Fonts for your branding text, make sure that whatever weight you choose is supported by the Googe Font you're using. If not the font will not be loaded properly.

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

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.

Navigation Layout

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.

Navigation Height

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

Navigation Text

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

Navigation Bar

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.

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.

Navigation Items

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.

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.

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.

Drop Down

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.

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.

Mobile

Navi 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.

Navigation Bar Styling

Sticky Navigation

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.

Banner Pairing

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.


Drop Down Small Header

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:

<small class="small_hdr">Small Label Text</small>

Drop Down Divider Line

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:

<div class="nav_divider"></div>
  • Please Note: The Small Header and Divider Line are designed to work with the Navigation Bar drop down menus only! They will cause you problems if used in the top, horizontal navigation of this stack or if used in any of the other navigation stacks in Foundry.
Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us