Navigation Overlay

Base Foundry stack

Add a navigation to your page that is supremely unique. The Navigation Overlay adds a toggle to your page that triggers a page overlay containing your site’s navigation.

  • 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
  • Includes custom Dark Mode settings
  • 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 would not be practical, we’ve not included a live example on this page.

Using Navigation Overlay

Dark Mode v2

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

  • Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.

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.

Mobile, Tablet and Desktop Distance
Allows you to set the offset distance from the edges of the browser for each breakpoint.

Border Width v2
Set a custom border width for your navigation toggle.

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.

Custom Font Size v2
Allows you to seta custom size for your branding at each of the three responsive breakpoints.

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

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.

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.

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

Italic
Allows you to choose to italicize the branding text within the overlay.

Navigation Items v2

Nav Items v2
This feature allows you to adjust the font size for your main navigation items in the overlay.

Child Nav Items v2
Use this feature to adjust the font size for your child navigation items in the overlay if you have any.

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.