Hero Header - Vertical Navigation
The hero image has an overlay with a heading with optional logo and a vertical navigation.
Image
The images are inserted in three different sizes - one for each device type. The images used in this page were cropped to 1600px, 1200px and 800px respectively before importing into EverWeb.
Overlay
The overlay uses a CSS grid layout to position the heading and navigation. When viewed on wider screens, there are 4 columns. When positioned on the right, the navigation is in column 4. When positioned left, it is in column 1.
On mobile phones, the layout switches to one column, and the navigation is centered.
The overlay has a maximum width setting to prevent the navigation from being too far to the left or right when viewed on large screens at wide browser widths.
Heading
The heading is full width with an option for a logo at the left.
The font can be web safe or non websafe or Google hosted with a web safe fallback. There are controls for the font size, mobile size, color, background color and its opacity and the height on wide screens and on mobile.
Logo
The logo has a control for selecting the image and for the image width and its position in relation to the top and left both on wider screens and on mobile.