Header Nav

The widget creates a header with a logo, h1 heading and a tab to open/close the navigation menu. It uses a CSS grid layout which changes from 3 columns and one row above the break point to 2 columns and 2 rows below it to allow the heading to drop down below the logo and navigation tab when viewed on devices with narrower screen widths.
Show/Hide Header
The header background has a n opacity slider and controls for setting the height above and below the break point.
The header has a fixed position and a jQuery plugin to allow it to hide on scroll down and show on scroll up or when the bottom of the page is reached.
Logo
The logo has a contol to set its width and can be configured as an internal link which would normally return the visitor to the home page.
Heading
The h1 heading with the website name shares the font family with the navigation links. In the demo the font is the Google hosted "Stint ltra Expanded" with a fallback to Helvetica. The heading has controls for font size, mobile size and color.
Menu Tab
The tab uses SVG code to create the icon so that its color and hover color can be changed. The background color ahs an opacity slider.
Navigation
The vertical navigation has controls for font size, color, hover and for the link background color and its opacity. There is a control to adjust the vertical spacing of the links and another to set the drop down animation time in milliseconds.
Current Page
There is an option to indicate the current page by checking a box and setting a different font color for the current page link text. Note that this color will not be seen when viewed on the EverWeb design canvas.
Menu Scroll
Like its parent (the header}, the menu has a fixed position. When the number of links is greater than the height of the viewing device's viewport, the links will scroll.
On Load
The navigation links can be seen when setting up the widget and checking a box will hide then prior to publishing. If the box is left unchecked, the links will show on page load when viewed at browser/device widths above the break point but hidden on smaller devices.
Research has shown that visitors are more likely to click on links in a vertical navigation nad less likely to if the links are hidden,
Widget Position
Since its position is fixed, the widget can be the last one on the page and inserted below the footer widget.