Responsive Full Screen Navigation Widget
The widget creates a basic header with an optional logo, an h1 heading for the website name and a "hamburger" icon which opens an overlay navigation on click.
EverWeb Widgets
Header
The header has an adjustment for height and the heading is vertically centered within it.
The logo has controls for setting the image width and its position in relation to the top and left.
The h1 heading is centered and has controls for setting the font family, fallback font, color, font size on computer and on mobile, font style, font weight and letter spacing.
The navigation toggle tab is created usign an SVG so it can be styled for color and hover color. Its position can be adjusted in relation to the top and right.
Header Position
The header can be placed either at the top of the page or beneath an item like a hero image as shown here.
There are two checkboxes that can be used when it is placed below - one overlays it at the top of the item above and the other overlays it at the bottom.
Navigation
The navigation can have up to twelve links - the last two of which can be configured to open internal or external pages and in a new window if required.
The navigation overlay has a control for adjusting the background color and for the close icon color and hover color.
Links
The links inherit the header's font family and have controls for adjusting the font size, mobile font size, color and hover color.
The links are spaced out vertically using Flexbox and the height occupied by each one is expressed in viewport units. The value for each link is calculated using CSS calc so it is essential to enter the total number of links in the appropriate box in the widget settings.