Features

  • Set alignment for overlay content
  • Choose from a set of predefined toggle icons
  • Set toggle styling
  • Customize look and feel of overlay and its content
  • Place navigation toggle on right- or left-hand side of your page
  • Add branding to overlay content
  • Use custom fonts for branding
  • Use custom text in place of toggle icon

Example

This site uses the Navigation Bar stack for its navigation. Since having two navigation stacks on a page not be practical, we’ve not included a live example on this page.


Using Navigation Overlay

Content

Align Navigation
You can choose to align the navigation items, and other branding content, within the overlay, to be left, right or center justified.

Toggle

Toggle Location
Choose whether you’d like the toggle that opens the navigation overlay to be placed on the left or right side of the page.

Toggle Icon
We’ve provided several different icon choices for your toggle button. You can also choose to use a bit of custom text instead of an icon for the toggle.

Toggle Colors
Define the colors for the toggle icon, border and background.

Branding

Include Site Title
Enable to insert your site title in the overlay along with your navigation items.

Display
Opt to pump up the sizing on your site title by choosing to apply a larger display size.

Use Override Font
Choose to apply a custom font to your site branding within the overlay. You can use one of the Foundry preset font choices or use your own custom font from Google Fonts. You can also choose what weight you wish to apply to your site title font.

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.

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

Style

Nav Items Colors
Set the color of your navigation page titles, the current page title as well as the color you’d like opened parent navigation items to be.

Backdrop
Customize the backdrop overlay by setting your own color here. You can choose to make the backdrop translucent by using the opacity slider in the color picker.

Close Toggle
Within the overlay there is an icon which allows the visitor to exit the overlay navigation and return to the page. You can customize that close toggle’s color as well as the color of its background when hovered over.

Site Title
Set the color for your site title if you’ve included it in your overlay navigation.

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