ThemeKit Picture Navigation
Color Change Header
EverWeb Widgets
Color Header
The header is fixed at the top and has a heading and an optional logo/link. There are two sets of background color controls - one for on load and the other for on scroll. It is design to sit over a hero item and be less conspicuous on page load. As the page is scrolled the background color can change if required and have more/less opecity.
The heading has controls for font, fallback font, color, weight, style, text shadow radius and color and letter spacing. The header height can be increased by increasing the padding.
NOTE: The widget should be the first item inserted on the page.
Picture Navigation
The navigation is opened by the tab which is fixed at the top right of the browser window and can be used with a header widget. The navigation opens on click or tap and fills the browser/device window.
The background image which opens is independent of the links.
The links are in a coloumn to the right. When viewed on computers hovering a link will change the image to one that represents the link target page. For example, if the link was to a product page an image of the product can be used.
Images
To make the navigation suitable for responsive pages which will be viewed on mobile devices, each image is inserted in two sizes. The images used in the demo were resized to 1200 x 800px and 600 x 400px before importing into EverWeb.
Mobile Performance
Although the mobile images will only be seen briefly on click it may be desirable to have them. However, for best performance on mobile devices, the mobile version of each link image can be ommitted by using the mobile version of the base image so that mobile devices only need to download one image instead of one for each link.
The demo uses different mobile images so that their effect on touch devices can be seen.
Links
Links are added via the EverWeb widget API assets list using relative or absolute file paths, There is an option to configure any link to open in a new window.
Find out about file paths …