EverWeb Widgets

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.

Navigation

The vertical navigation can be positioned left or right when viewed on computers and is centered when viewed on mobile phones.
Links are inserted by click the "Add" button, entering the link text and then clicking the "Link" button to choose the destination.
There are controls for font size, color, hover color, text-align, background color and its opacity and border radius.
The link's padding and vertical spacing can be adjusted and the position can be switched to the left by checking a box.

© EverWeb Widgets -