EverWeb Widgets - Active Navigation

Horizontal Active Navigation

Styling & Link Options

The horizontal 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.

This version is NOT suitable for full width use. Click the button below for the full width version …

Horizontal Active Navigation Widget
Horizontal Active Navigation Widget

Widget Settings

Command drag the widget into the Header area and adjust the width using a drag handle or the Metrics inspector.
Align the tabs left, right or center.
Enter the font family name, check the box if it is Google hosted and select a suitable web safe fallback font.
Set the font size, color and background color.
Adjust the background opacity if required.
Set the hover font and background colors.
Set the active font and background colors and text decoration.
Check the box for a transparent background.

Horizontal Active Navigation Widget

Navigation Styles

Set the minimum width for the navigation tabs.
Adjust the height using the value for TB padding and set the value for LR padding as required.
Set the separator width and color.
Check the box for a transparent separator.
If the navigation runs to two or more rows, set the value for the Row Spacer.
Set the tab 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 Navigation-2 widget pack.