Features

  • Set icon sizes at each breakpoint
  • Include labels for the Tablet and Desktop breakpoints
  • Set label font size at Tablet and Desktop breakpoints
  • Navigation bar height changes based on icon and label sizes
  • Navigation items widths adjust based on number of items
  • Over 300 icons to choose from
  • Built-in sticky navigation feature
  • Drag-and-drop icons to easily rearrange your navigation items
  • Customize colors
  • Use rounded or squared off corners
  • Include tooltips for individual icons

Example


Using Icon Bar

Icon Size

Mobile, Tablet & Desktop
Set a different size for your icons at each of the three different breakpoints.

Labels

Labels
Choose whether to show or hide the labels for the icons in your Icon Bar.

Hide Labels On...
Choose when to begin hiding the labels. The labels will always be hidden at the mobile breakpoint to conserve space and make for a clean display. You can opt to have them also be hidden at the Tablet breakpoint.

Tablet & Desktop
Set the font size for your labels at both the Tablet and Desktop breakpoints. No Mobile breakpoint option is provided as the labels are always hidden at the Mobile breakpoint.

Style

Background
Set the color of the Icon Bar background to match your site. Use one of Foundry’s color swatch presets or make use of custom color pickers to style the title bar.

Icon
Choose the colors for the icons themselves and the background when an icon is hovered over.

Label
Define what color you wish your label text to be.

Sticky Navigation

Sticky Navigation
Enabling this feature allows the icon bar to affix itself to the top of the browser window. This occurs when the visitor has scrolled far enough for the icon bar to reach the top of the browser.


Icon Bar Item (Child Stack)

Icons are added to the Icon Bar by clicking the small blue plus sign at the bottom of the stack. Doing so adds an Icon Bar Item child stack to the Icon Bar. Each of these child stacks has its own individual settings as well:

Link
Choose where you want the visitor to be taken when they click on a specific icon within the Icon Bar. You can set the link to be an internal page or an external site elsewhere on the web.

Icon
Choose which icon you wish to have each link represented by. Each of the Icon Bar Item child stacks can have a different icon. There are over 300 different icons to choose from.

Label
Set the label for your icon on each individual child stack.

Tooltip
Add a popup tooltip to your icon. These can be enabled on a per-icon basis. You can then set the tooltip text and its location, which can be set to either bottom, or top.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!
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