Side Nav Header

EverWeb Widgets

Hero Header - Side Navigation

The header has a hero image, animated heading and overlay and a slide in right navigation menu. It is supplemeted by an overlay heading with optional logo and a toolbar with phone number which switches to a "Call Me" button, a smooth scroll down and an email button.
Header Widget
The image is full width, fixed height responsive. The image height can be adjusted and it becomes 100vh to fill the screen of mobile phones in portrait mode.
The image is inserted in two sizes - one for computers and tablets in landscape mode and the other for tablets in portrait and mobile phones.
The images in the example are 1200px x 800px and 800px x 533px which give good enough quality without effecting download time too much.
The overlay has vertically centered heading and controls for adjusting the background color and its opacity. The overlay can animate in with controls for setting the animation time and delay in seconds.
Navigation
The slide in navigation is opened and closed by a "hamburger" icon and can be positioned left or right. The background has an opacity slider and the links can have a separator.
The navigation is exposed while editing and has a control to adjust its width. It is hidden prior to publishing by checking a box.
Flashing Icon
The "hamburger" icon has controls to adjust the color and hover color. For better visibility, it has an optional flashing animation. This has a checkbox to turn it on and controls for setting the animation time in seconds and a drop down for setting the iteration count. The count can be either be 1 through 10 or set to "infinite"/

Logo Heading

The heading can use a web safe or a non web safe or Google hosted font with a web safe fallback. The font used in the example is the Google hosted "Stint Ultra Expanded". This font has no font weight adjustment so a 1px white text shadow is used to make it more visible.
The optional logo is located on the left and its position can be adjust in relation to the top and left.
The heading can be used as a block item on its own or positioned over the item above. There are two checkboxes - one for positioning it at the bottom and the other to overlay the top.

Scroll Down Toolbar Bar

The scroll down bar can be stand alone or be placed below an item and moved up to overlay the bottom as can be seen in the example above. It has options for adding a phone number/phone button, scroll down icon and an email link.
The toolbar can have a fade in animation with controls for time and delay set in seconds.
Phone
The phone number is displayed on computers and tablets. On mobile phones, this switches to a phone icon which places the call when clicked or tapped.
Smooth Scroll
scroll down tab has a chevron SVG icon and is adjustable for icon color, hover color and background color and its opacity.
When clicked or tapped, the tab smooth scrolls to the next item on the page. The anchor is built in to the widget.
Email
The email icon is located to the right. It has fields for entering the email address items and the subject.
The email address has basic spam protection so the address is entered in three boxes - name, domain name and domain extension.