EverWeb Widgets | Full Width

Full Width Icon Navigation
Full Width Icon Navigation Anchor

Links & Smooth Scrolling To Anchors

The navigation can use either the Font Awesome or the Google Icons. It is an alternative to the Tab Navigation for creating a navigation with smooth scrolling to anchors on the some page but is more versatile in that it can also incorporate links to other pages of the site.
The second last link can be configured as an internal link or an Email button and the last one can be an internal or external link with New Window option.
In this case, the navigation has been fixed so that ot can incorporate a back to the top link.

Full Width Icon Navigation

Full Width Icon Nav Widget

Widget Settings

Check one of the boxes to enable either Font Awesome or Google icons.
Check the Full Width box in the Metrics inspector and set the maximum width for the navigation.
Select the tab width setting which corresponds to the number of items in the menu. See the table at the bottom of the page for this info.
Set the icon size and the padding. These two settings determine the overall size of the individual tabs.
Set the icon color and the background color and its opacity.
Set the hover colors.
Set the box shadow radius and color if required.
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.

Link Setup

Enter the icon name.
NOTE: Fontawesome icons which extend to two or more words require a hyphen between them and Google icons require an underscore.
Enter the item name if required.
To configure the tab as an internal link, choose the "Link to:" page.
To configure the tab as a smoot scrolling anchor, check the box and enter an ID number. This must be the same ID number as the corresponding anchor widget.

Full Width Icon Nav Widget

Email & External Link

Link 9 can be configured as an internal link or an "Email" link.
To configure the email link, check the box and enter the email address and subject.
Link 10 can be configured as an internal or an external link. Either one can be set to open in a new window by checking the box.

Scroll Time & Fix On Scroll

If any of the links are configure as smooth scroling links to anchors, set the scroll time in seconds.
To fix the navigation on scroll, check the box, enter the required distance from the top and set to "Always On Top" using the Metrics inspector or the "Arrange" menu.

Anchors

For each anchor tab link, drag a Full Width Icon Anchor onto the design canvas and enter the same ID number as in the anchor link.
The widget appears as a 20px square. Select it and check the "Allow free dragging" box in the Metrics inspector.
Drag it out of the way into the background area and down to the anchor point.

Items345678910
Tab Width33.3252016.6714.312.511.110