EverWeb Widgets - Active Navigation

Full Width Horizontal Active Navigation
Full With Active Navigation Widget

Styling & Link Options

This version of the horizontal navigation is designed to used with the Full Width control in the Metrics inspector and would normally be used with the Full Width Header widget. The navigation can be centered or stuck to the left or right hand browser edge. There is a control for adjusting the horizontal spacing from the browser edge.

The navigation can have up to twelve items. The last two can be configured as external links if required with the option to open them in a new window.
The navigation can use non web safe and Google hosted fonts since there is an option for including a web safe fallback font.
The tabs have options for font color and background, hover font color and background and active font color and background. The active tab can also have text decoration with options for underline and line through.
The tabs can be styled for border width, color and radius and there is a checkbox for removing the background by making it transparent in all states.
The navigation tabs can have a variable width, colored separator which would normally be used with the transparent background. Tabs with a colored background can separated by setting the separator color to transparent.
The tabs have a minimum width setting, can be aligned left, center or right and can return to a second or more lines by reducing the overall width and setting a value for "Row Spacer"

NOTE: When setting up the navigation, the tabs will display the active colors until the "Link to:" pages have been selected. As with hover colors, the active color will then not be displayed on the EverWeb design canvas. Use the Preview button to test the design in the browser.

Full Width Active Navigation Widget
Full Width Active Navigation Widget

Widget Settings

Check the Full Width box in the Metrics inspector.
Set the navigation's alignment and the distance from the browser edge if aligned left or right.
Enter the font family name, check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the font size and color.
Set the background color and adjust its opacity if required.
Set the hover color and background color.
Set the current page link's color, background color and text decoration.
Check the box if the navigation is to have a transparent background.

Tab Styles

Set the navigation tab minimum width if required.
Adjust the height using the value for Padding TB and set the value for Padding LR to a suitable value.
Set a width and color for a vertical separator if required and check the box if the separator is to be transparent.
Set the tab's border width, color and corner radius if required.

Navigation Links

Enter the text and choose the "Link to:" page for the first three items.
Add more items by checking the box.
The last two items can be configured as external links.
Check the box to show the item, enter the link text, check the box for an "External Link" and enter the URL.
Check the box if the link is to open in a new window.

This widget is included in the Full Width widget pack.