Logo Navigation Heading
The item can be placed anywhere in the stack of widgets on the page. In this case, it is inserted below a hero item on the EverWeb design canvas and made to overlay it at the top when the page is published by checking a box. Checking another box makes it sticky by setting its position to fixed.
The widget has options for a logo and/or a heading and there is a "hamburger" icon on the right to open the navigation.
Since this is a grid layout, all the items are easily self centered vertically without any fancy CSS.
Rows
If all the items are selected, and the logo image is wide, the navigation can be set to have two rows on mobile devices.
In thise case, the navigation height is automatically doubled, the logo occupies row 1 and the heading and navigation icon are on row 2. The break point at which this happens is selected from a drop down menu.
Logo
The logo has controls for setting the image width and mobile width and for setting its distance from the left edge. The logo image can be configured as an internal link and there is a text field for entering a title if required.
Heading
The h1 heading is centered and can use a websafe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size, mobile size, style, weight, color and for letter spacing and mobile letter spacing.
Icon Tab
There is a slider to adjust the relative size of the icon and controls for color, hover color, background color and its opacity, border radius and the position in relation to the right.
Navigation
The navigation drop down is open so that the links can be added and styled. It is then closed by checking a box prior to publishing.
There are controls for setting the drop down width, link size, color and hover color, background color and its opacity and the separator width. The separator inherits the font color.
There is a checkbox for turning on the option to show the current page link in a different color.