When designing responsive pages it's not possible to drop items like phone and email links, social media icon links etc anywhere on the design canvas. They need to be incorporated in containers and a well designed toolbar actually improves the appearance of the page design.
The toolbar above uses the Social Icons which are used on many websites and have the advantage of being familiar to visitors. Additional custom icons have been added to create phone, info and settings links.
The toolbar has the phone number/phone icon to the left and the email icon to the right. The navigation icon in the center pops up the links on click or tap.
Toolbar Links
The icons in the popup are added as required and are selected from a drop down in the widget settings.
The icon links can be configured to open internal or external pages using absolute or relative file paths and can open the linked page in a new window if required. Follow the link below to find out about file paths.
Spam Protected Email Link
The optional email link has separate fields for the email name, domain and domain extension. The @ and the period are inserted using Javascript. This prevents spammers using scrapping software from harvesting the email address.
Phone
The phone item is optional and shows the number on computers and tablets. It switches to a "Call Me" phone icon on mobile phones.
The widget includes code to prevent the phone number appearing as a nasty looking link when viewed on iPads.
NOTE: If a Mac user clicks the phone icon when using a computer or iPad, FaceTime will open and they can contact the site owner that way.
The toolbar icons are centered. Icons are added using the EverWeb Widget API Assets List and there are checkboxes for adding the phone and email tabs. The toolbar uses a CSS Grid layout and the columns are set as auto so the icons fill the width of the toolbar. The width of the icons can be adjusted using the maximum width setting.
Icons
The widget has a button for opening the Font Awesome Cheatsheet to find the required icon names. Each link has fields for entering the icon name, the title shown on hover and the URL. There is a checkbox for the new window option and a control for setting the link tab;s background color;
The icons share the same color and hover color and their size can be adjusted.
Spam Protected Email Link
The optional email link has separate fields for the email name, domain and domain extension. The @ and the period are inserted using Javascript. This prevents spammers using scrapping software from harvesting the email address.
Phone
The optional phone link can be hidden on computers and tablets if required and only appear on mobile phones. It it is shown on these devices, the phone number can be entered into the title field to show on hover.
NOTE: If a Mac user clicks the phone icon when using a computer or iPad, FaceTime will open and they can contact the site owner that way.
This is a very useful function for long pages. The toolbar has a scroll down chevron icon which when clicked, scrolls the page down by the height of the viewport. It sticks to the bottom of the browser/device window so that it is always in view and has an options for a scroll to the top function, phone number/phone icon button and an email link
Icons
The icons are SVGs so they can be adjusted for size, color and hover color. SVGs are preferable to PNG images on a responsive website as there are no image files to download or extra server requests.
Phone
The optional phone link can be hidden on computers and tablets if required and only appear on mobile phones. It it is shown on these devices, the phone number can be entered into the title field to show on hover.
NOTE: If a Mac user clicks the phone icon when using a computer or iPad, FaceTime will open and they can contact the site owner that way.
Smooth Scroll
The smooth scroll down/up function uses a couple of lines of Javascript and has controls for setting the scroll time in milliseconds for each direction.
Spam Protected Email Link
The optional email link has separate fields for the email name, domain and domain extension. The @ and the period are inserted using Javascript. This prevents spammers using scrapping software from harvesting the email address.
Position
The last control is a checkbox to fix the position of the toolbar at the bottom og the browser/device window. It should be inserted below the Toolbar Footer widget which has extra bottom padding to accomodate it.
The toolbar spacer shown further up the page has an image background and shows the optional header. The one below the footer has a solid color background and is set to about 50px in height to allow the scrolling toolbar to clear the footer when the visitor has scrolled to the bottom of the page.
The spacer has controls for setting the height on computer, tablet and phone and the image is inserted in two sizes - one for computers and the smaller one for devices with a screen width less than the break point.
The heading has all the styling options and, as can be seen from the example, can use a Google hosted font with a web safe fallback.
Since it has a grid layout, the heading can be inserted at the top, center or bottom by setting the value of the align-self property to start, center or end. The distance from the top or bottom can be adjusted using the control for top/bottom padding.