Image + Sidebar

The widget inserts a full width, fixed or viewport height HTML5 <figure> element containing a <picture> element with the images. This method of inserting the images is preferred rather than use a background image since allows an alt text attribute for inserting keywords for the search engines.
Overlay
The transparent overlay has a grid layout with four columns. On wider screens, the sidebar occupies column 1 which has a fixed with. The header with the h1 heading starts at column2 and spans three columns.
The optional logo appears at the top of the sidebar and the navigation links are vertically centered.
Below The Breakpoint
At browser/device widths below the break point, the sidebar is hidden. The header becomes full width with a "hamburger" icon at the right.
The logo magically disappears from the sidebar and reappears in the header.
Slideout
The sliding sidebar uses a CSS animation rather than Javascript as this is more efficient for use on mobile devices. The mobile version of the sidebar has an "X" tab to close the sidebar.
Slidebar Width
As mentioned above, the sidebar has a fixed width when viewed on computers and this can be set to suit the length of the longest link.
The sliding version has a percentage width. This is preset to 30% on tbalets in landscape, 40% on tablets inportrait and phones in landscape and 100% on phones in portrait mode.
To see this in actio, open the page in a desktop browser, reduce the browser width until the nav icon appears, click the icon to slide out the sidebar and then slowly reduce the browser width. Firefox is the best browser for doing this as it will reduce in width much more than Chrome or Safari.
Height
The item can have a fixed height when viewed on wider screens and then switches to viewport height on mobile devices. There is a checkbox for setting the image to viewport height when viewed on computers.
Header & Sidebar Background
The background has two sets of controls for setting the color and its opacity - one for computers and the other for mobile - since it needs to have more opacity when viewed on touch devices.
Images
The image is inserted in two sizes - one for computers and tablets in landscape mode and the other for tablets in portrait mode and phones. The images used here were cropped to 1200px and 800px wide before importing into EverWeb. If better quality is required on wide screens, the large image size can be increased to about 1600px.
Logo
The optional logo has controls for setting the PNG image width and its position relative to the top and left.Below the breakpoint, the image disappears from the sidebar and reappears in the header. It inherits the position from the left but is vertically center automatically in the header.
Text
The widget can usea web safe font or a non web safe or Google hosted font with a web safe falllback. The font used here is the Google hosted "Stint Ultra Expanded"
The heading, links and action buttons all share the same font colour and there is a control for setting a hover color for the links.
Links
The links are inserted using a modified verion of the EverWeb Widget API Assets List and can be configured to open internal or external pages or files.