Responsive Header Right Nav

Slide In Right Header Nav

Contact Form

EverWeb Widgets

Header Contents

Page Header

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 in navigation is opened by a "hamburger" icon at the top right and closed by an " X" icon.
The links are vertically centered and the navigation container width is adjustable. Both the link background and the navigation background have controls to adjust the color and opacity and the links can be spaced out vertically and have radiused corners if required.

Hero Image

Hero image with an animated heading and overlay.

Menu

Slide in right, vertically centered navigation.

Heading

Responsive overlay heading with optional logo.

Contact Bar

Contact bar with phone, email and modal contact form.

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.

Contact Bar

The contact 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, contact form button and an email link.
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.
Contact
The contact icon in the center opens a modal window with a contact form when clicked or tapped. It has the option to show a title on hover when viewed on computers.
The form in the modal has fields for the name and email address and options to add a phone and a text field.
The styles are not adjustable and it inherits the font -family set for the icon bar phone number.
The form is set up exactly like the EverWeb default contact form so the troubleshooting steps are the same if the form doesn't work for any reason.
NOTE: Using an email address like Yahoo or Google can sometimes cause delays in receiving form data and these quite often end up in the junk mailbox.
Better results will be obtaines if a web mail address is used. This can be set up as a mail forward to a Gmail, Mac mail or Yahoo address so that the results can be read in the Mail app on a Mac.
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.

© EverWeb Widgets -