Slide Nav Header

EverWeb Widgets

Hero Header - Slide Down 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 contact bar with phone number which switches to a "Call Me" button, an email icon and a contact form which opens in a modal window.
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 down navigation is opened and closed by a "hamburger" icon at the top right. The links are centered horizontally and spread out vertically to fill the available space. The background overlay is adjustable for color and opacity. The link text can animate on hover by setting a larger size for the hover font.

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.

Search Bar

The spy glass icon opens a modal when clicked. This has a text introduction and a custom Google search feature which requires a Google custom search ID.
The scroll down icon has a field for entering a title and a control for setting the scroll time in milliseconds. When tapped or clicked the page will scroll to the next item. The anchor is build in to the widget.
The email link has the option for showing a title on hover and has basic spam protection. For this to work, the email address needs entered in three different fields - name, domain name and domain extension.
The bar can be placed anywhere in the stack of widgets or placed below an item and made to overlay its bottom by checking a box as show in the example on this page.
The bar can animate in with controls for time and delay set in seconds.

Google Custom Search