Header & Navigation

The item above consists of two widgets - the Responsive Parallax header and the Responsive Parallax Nav. This demo shows it being used in combination with the Parallax Image widget.
Header
The background image is loaded in three different sizes for the various devices - computer, tablet and mobile phone. It is full width, responsive with a fixed height. The header can also be set to viewport height and an example of this can be seen by clicking the link above to the animated version.
The header has an overlay with adjustable opacity and an h1 heading. It has options for an h2 heading and a CTA style link. The link can be configured to open an internal or external page and in a new window if required.


Navigation
The navigation is inline when viewed on computers and tablets. On smart phones it switches to a full width block layout. It can accomodate up to fourteen links. The last two links can be configured to open external pages with a new window option.
Navigation Position
In this example, the mobile navigation appears below the header so it MUST be inserted after the Parallax Header widget.
When it is inserted on the EverWeb design canvas, the navigation has a relative position. To move it to the top so that it overlays the header, there is a checkbox to "Position nav at top".
When the page is published, the navigation will have switched to its proper place at the top of the browser/device window.

Parallax Image

The image is inserted in the background and has responsive width and a fixed height. There is a setting for changing the image height when it is viewed on a mobile phone.
Image
The widget displays different sizes of images on the various devices - computer, tablet and phone. When creating pages with parallax images it is essential to keep the file size to a minum and crop them to suitable aspect ratios before importing them into EverWeb.
For example, the images used in this demo are 1600px, 1200px and 800px wide respectively.

Overlay Styles

The overlay covers the whole image and has controls for color and opacity which can be adjusted to suit the image content to to make the text visible.
The overlay has an h1 heading by default with options to add an h2 heading and a CTA style link.
The overlay content can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The h1 can be styled for font size, color, font style and weight and letter spacing and the h2 for font size.
Link
The link has controls for setting the font size, color which is inherited by the border color, border width and hover color.
It can be configured as internal or external links and to open in a new window if required.
The link above opens the page with the demo of the image version of the parallax scrolling widget in a new window.

© EverWeb Widgets -