This is a very versatile navigation system suitable for more advanced users. It uses the Ionicon icons and can create internal or external links, smooth scroll to an anchor links, an email link and a phone button which can be made to appear only on mobile phones.
Icons
The Ionicon stylesheet is downloaded using the CDN (Content Delivery Network) link. This creates a very fast and efficient method of inserting icons for responsive web pages.
The range of icons can be seen by clicking the Icons link at the top of this page.
To quickly find an icon open the cheatsheet from the link in the widget settings, enter a keyword into the search box, click any one of the icons which appear and its name will appear. Click on the name to highlight it and copy to the clipboard - command +c
Links
The icons can be displayed with or without the text. Internal and external links can be set up using relative and absolute file paths to the linked page or file. The links can open in a new window if required.
Any link can be set as a smooth scroll to an anchor by checking a box and entering an anchor ID rather than a file path.
Email & Phone
The email link is optional and has fields for the icon, text, email subject and email address.
The phone link can be hidden on computers and tablets and only displayed on mobile phones. If viewing this page on a computer, reduce the browser width to see the icon appear.
Styles
The icon and its container can be adjusted in size and can be styled with a border and/or a box shadow. The text can be styled for font family, fallback font, font size, color and hover color.
The link spacing is adjusted using the value for minimum width and the container background color and its opacity can be set.
Position
The links can be inserted anywhere but can also be made to overlay the item above it by checking a box. In the example on this page, the links are placed below the image on the EverWeb design canvas but appear at the top of the image as an overlay.
The links can be made sticky by checking another box so that they always remain in view.
Animation
The links can animate in on page load with a fade in effect with controls for adjusting the animation time and delay.

The main purpose of this link bar is to display links to the various social media pages and it can also display a "share by email" link.
The link bar can actually have any type of link and can be used to navigate to internal pages by entering a realtive file path. The links can open the linked page in a new window if required.
Titles
A title attribute can be added to the links globally. The text entered into the title field will show when the link is hover when viewed on a computer.
Share Link
The share link has a choice of icon types and has fields for entering the title, the email subject and the email content. A hyperlink entered into the email content will appear as text on the email but will change to a clickable link for the recipient.
Icon Styles
The icon and its container can both be adjusted for size and there is a control for adjusting the icon relaative to the top of the container. There are controls for icon color, backgrounf and opacity and border with, color and radius.
There is a checkbox to change the icon container from square to round and the spacing between the icons can be adjusted.
Hover Styles
When viewed on computers, the icon can have a hover color and a box shadow which can be styled for radius and color.
Position
The links can be inserted anywhere but can also be made sticky by checking a box. It can be fixed at the top or botom of the browser/device window. There is a control for adjusting the distance from the top or bottom.
Animation
The links can animate in on page load with a fade in effect with controls for adjusting the animation time and delay.

Smooth Scroll To The Top

The smooth scroll to the top chevron up icon sticks to the bottom of the browser or device window. It should be positioned above the last item on the page which would normally be the footer.
Settings
The icon color, hover color and the background color and its opacity can be adjusted. It can be positioned left or right and its distance in on the X and Y axis set.
The scroll time can be adjusted and is set in milliseconds.