EverWeb Widgets

Responsive SB Header

The Responsive SB Header works in conjunction with the Responsive SB Nav Right widget. It has an h1 heading for the website name, an option for a logo to the left and a "hamburger" icon for triggering the slide in menu.
The heading has options for a text shadow and has a control for reducng the font size on mobile phones.
The icon tab has controls for color, background color and its opacity and border radius.
The header can have a bottom border which acts as a separator if required and can also be fixed in position by checking the appropriate box.

Responsive Slide In Sidebar Navigation

The slide in navigation works in conjunction with the Responsive SB Header widget which contains the icon tab to trigger the navigation. It can have up to fourteen links. The last two links can be configured to open external pages and in a new window if required.
Set Up
When the widget is dragged onto the page, the links and the overlay can be seen for adding the info and styling. The height can be increased by dragging a handle if required.
Once all the links are set up, the checkbox is checked to hide the navigation and the widget height reduced to about 20px.
The navigation can be placed anywhere in the stack of widgets on the page but note that it will occupy a height of 20px - or whatever its final height is set to.
In this example, the navigation is inserted just above the footer widget where a space is required anyway.
The navigation can be set to zero but that will make it almost impossible to find on the EverWeb design canvas!
Distance Top
This control is for making the navigation appear below the header so that it doesn't obscure the "hamburger" icon. The value should equal the header height + the header bottom border/separator if present. In this case, the header is 60px in height and the separator is 4px so the value entered for "Distance Top" is 64.

Responsive Link Footer

The footer has an optional heading, a smooth scroll to the top chevron icon, up to 48 links arranged in auto columns and a copyright notice with an option to auto update the copyright year.
The iink tabs are arranged in three columns when viewed on computers, two on tablets in portrait mode and one on mobile phones. There are options for adding a phone number/phone tab and an email tab.
Phone
When viewed on computers and tablets, the phone number is contained in a <span> so that it is displayed as text rather than a link. When viewed on mobile phones, this is replaced by a link which will dial the number when tapped.
Email
The optional email link has fields for entering the name, domain and domain extension separately so that code can be added to defeat those using email scraping software to harvest email addresses.
There are options for adding the email subject and some content if required.
© Notice
The copyright notice has an auto update function which can be inserted by checking a box. As always, the copyright symbol is created by inserting &copy;