This navigation uses PNG images and can be used for page navigation or smooth scrolling down the page - or both. It can have up to eight dual purpose links, an email link and an external link which can also open in a new window if required.
Each of the first eight links can be configured as as smooth scrolling link to an anchor on the page or to another page of the site.
The links can be placed anywhere on the page and scroll with the rest of the content. By checking a box, the links can scroll to the top and then stick so that they are always in view. The distance from the top can be defined in the widget settings.
Images
The images used in this demo are round PNGs with a height and width of 64px. This is large enough for most purposes and can be reduced to 32px on mobile phones in the widget settings to give the minimum size for a touch link and retina @2x quality.
The image has the optional border added. Because it is round, the "Round Image" checkbox is checked to allow the border - and a box shadow if added - to follow the image outline.
Captions
Captions are turned on globally and can be styled for font family, fallback font, font size and color. The navigation background background color has a slider to set the opacity.
Animation
There is a checkbox to turn on a CSS scale function to animate the images on hover when viewed on a computer. This simply scales the image and its caption up slightly when the cursor is over them.
Links
The first two links are turned on by default and the rest are optional. For use as an internal link, the text is entered if captions are turned on and the linked page is selected using the "Link to:" control.
To create a scroll link, check the box to turn on this function and enter the anchor ID number.
The external link has a box for the URL and a checkbox for opening the linked page in a new window.
The Email tab has boxes for entering the email adress and subject.
Anchors
Anchors can be created using the Responsive Header widget or the Responsive Theme Break.
The header can be set to an h3 to introduce a new section.
The Theme Break by default has a line but the line height can be set to zero to create a "hidden" anchor.
Both widgets have a checkbox to turn on the anchor function and a number box for setting the ID.
Note how the "Back To The Top" link uses the theme break widget which creates a line below the h2 heading with the page name.
There is a control for setting the scroll time in milliseconds globally when the scroll link option is used.
Rows
The number of images per row for can be set for comuter/laptop, tbalet lanscape mode, tablet portrait mode and mobile phone. The icon size can also be reduced on phones.
The spacing of the links can be adjusted by altering the value for the navigation's Maximum Width.
Scroll & Fix
When the scroll and fix setting is turned on, the distance from the top at which the navigation sticks can be set.
When using this function, make sure the widget is set to "Always On Top" using the Arrange menu or the Metrics inspector.
The responsive heading widget shown above is used here as an anchor. The widget is included in the Responsive Basic pack.
The theme break creates a horizontal line which is vertically centered inside a div with adjustable height. The background has controls for adjusting the color and its opacity.
The line type can be solid, dotted, dashed or double with controls adjusting its height and color.
The theme break above has its anchor function turned on and works in conjunction with the Line Anchor tab in the navigation created with the Responsive PNG links widget.
The black spacer above this text is created using the Anchor Spacer widget. The height is set to 100px and the background opacity is set to 100%.
The widget can also be used as a hidden anchor by setting the opacity slider to zero.
