Parallax Header

The header has a full width, fixed height background image which can go to full height on mobile phones in portrait mode if required.
The grid overlay has a grid layout with a maximum width setting and the navigation is positioned to the right when viewed on browser/screen widths above the break point.
Logo
The optional logo is positioned at the top left and can be configured as an internal link which would normally open the home page.
Its width and position relative to the top and left can be adjusted.
Heading
The heading is centerd and has controls for font family. fallback font,font size and color, top/bottom padding, letter spacing and text shadow.
Images
The parallax images in the demo are are used in conjunction with responsive text widgets.
The images are loadas background images and are inserted in three sizes - large, medium and small. The images used in the example were cropped to 1200px x 720px, 800px x 480px and 375 × 667px.
Note how the small image has been cropped to a portrait aspect ratio for better performance on mobile phones in portrait mode.
Navigation
The vertical navigation is in the left column when viewed on wider screens and becomes center on screen widths below the break point.
The links inherit the font family set for the heading and have controlsfor font color, size, background color and its opacity, hover back ground and link spacing.
The naviagtion has a control for adjusting its width and the current page can be indicated by checking a box and choosing the current page link's background color.
Mobile Styles
At screen widths below the break point, the overlay layout is changed to a single column with three rows. The heights of the first and second rows = for the logo if present and the navigation - have controls toset their height to suit the height of the logo and heading.
Parallax Speed
The speed control is a slider with a default setting of 25. If set to zero the image will be fixed in position.
At maximum value there will be no parallax effect and the image will scroll with the rest of the page content.

Parallax Hero Image

Optional overlay with heading, text and optional link.

Parallax Video

Parallax Images

The parallax effect has been around for quite a long time but still has a place in web design if used sparingly.
When interspersed with non paralax items, these images give the web page an appearance of depth.
The parallax images in the demo are are used in conjunction with responsive text widgets and the first image is overlayed at the top with a ThemeKit Logo Nav widget.
The images are loadas background images and are inserted in three sizes - large, medium and small. The images used in the example were cropped to 1200px x 720px, 800px x 480px and 375 × 667px.
Note how the small image has been cropped to a portrait aspect ratio for better performance on mobile phones in portrait mode.
Parallax Speed
The speed control is a slider with a default setting of 25. If set to zero the image will be fixed in position.
At maximum value there will be no parallax effect and the image will scroll with the rest of the page content.