Hero Switch Sticky Widget

Come Fly With Us

Balloons Are Cool

Info

Hero Switch Scroll Over

The full width, fixed height image has a an overlay with a caption, optional text description and a CTA style link. The image switches to responsive height when viewed on mobile devices. It can be set to viewport height on computers so that it fills the screen vertically as well as horizontally.
NOTE: The widget includes the picture polyfill so that the picture element will work in obselete browsers like the later versions of Internet Explorer.
Images
Two images are inserted - one for computers and a much smaller one for mobile devices. The large image used here is 1600 x 1000 px and weighs in at 287 KB. The smaller image is 800 x 500px width a file size of 100 KB.
Scroll Over
The image allows the content below to slide up over it on scroll. On mobile devices, the image scrolls with the rest of the content.

Navigation

The Hero Switch Navigation widget creates an inline navigation when viewed on computers and switches to a hamburger drop down on mobile devices.
If viewing this page on a computer, reduce the browser width to see the navigation switch from one type to the other.
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.
The navigation is designed to be used in conjunction with a hero image or other full width item. It can appear above or below or overlay the top or the bottom of the item. For an overlay, the navigation is placed below the hero image on the EverWeb design canvas and then the appropriate box in the widget settings is checked to place it in the required overlay position when viewed in the browser.
Current Page
The widget has an option to display the current page tab in a different color and also to add an animated underline to it.

© EverWeb Widgets -