Info Header

The header on this page works in conjunction with the navigation widget described below. Attempting to create a multifunction header (or footer) with the EverWeb default Responsive Row widget can end up looking really messy.
The header has options for a logo at the top left, an h1 heading for the website name and a drop down info menu. The header has a three column, two row grid layout. The logo and drop down trigger are in column 1, the heading in column two and column three is left empty for the navigation widget's icon.
The logo is in row 1, the drop down tab in row two and the heading spans row one and two above the break point.
Break Point
The break point is preset for phones in landscape mode and, at that point, the heading drops down to row 2. The phone number if present switches to a "Call Me" phone icon.
Info Menu
The meu opens and closes on click or tap using the info icon. The icon has controls for setting its color, hover color and the background color and its opacity.
The menu is open for editing when viewed on the EverWeb design canvas. There is a checkbox to close it prior to publishing the page.
Links
The phone and email links are turned on using checkboxes. The rest of the links are added using the Assets List and can be configured to open internal or external pages and files.
The links inherit the main heading's font and have controls for font size, color, hover color and separator width.
Email Link
The email link has a field for the email subject line and the address is entered in three boxes for email name, domain and domain extension. The @ and the period are filled in using Javascript and this gives basic protection from spammers using scraping software to harvest email addresses from websites.

Drop Down Navigation

Rather than be incorporated in a header, this navigation is standalone and can be positioned over the header at the top right. The position can be absolute so that the navigation scrolls with the rest of the page content or fixed to make it stick in position.
Nav Tav
The nav tab can be positioned in relation to the top and right. It has a "hamburger" icon which is an SVG so that its size, color and hover color can be adjusted. The icon size is adjusted using the value for padding - more padding equals a smaller icon and vice versa.
The icon background has controls for color and opacity and there is the option to add a border radius.
Drop Down
The drop down has control for styling the background color and its opacity, separator width and color and for border width, color and radius.
Links
As can be seen from the example on this page, the font can be Google hosted with a web safe fallback. There are controls for font size, color and hover color.
The links are added using a modified version of the EverWeb Widget API Assets List and can open internal or external pages and files.
Current Page
The current page can be indicated using a different color. The Javascript to make this happen is turned on by checking a box.
Position
The navigation should be placed at the bottom of the stack of widgets on the page - below the footer widget. The dropdown is visible for editing and then is hidden prior to publishing the page by checking a box in the widget settings.

Info Footer

The footer has a three column, two row grid layout. The info icon is in column 1 and spans both rows. The center text section is in column 2 and also spans both rows. The scroll top and email icons are in column three and each occupy a row.
Break Point
The break point is preset for phones in landscape mode and, at that point, the text drops down to row 2. The info, email and scroll top icons position themselves in row one.
The phone number if present switches to a "Call Me" phone icon.
Info Menu
The meu pops up on clicking or tapping the info icon. The icon has controls for setting its color, hover color and the background color and its opacity.
The menu is open for editing when viewed on the EverWeb design canvas. There is a checkbox to close it prior to publishing the page.
Links
The phone link is turned on using a checkbox. The rest of the links are added using the Assets List and can be configured to open internal or external pages and files.
The links inherit the text section's font family and have controls for font size, color, hover color and separator width.
Text Section
The text section is centered in the footer in an HTML5 <article> and can have several lines of text. The footer height can be adjusted to suit. It is entered into a large text box using the return key for line breaks.
As can be seen from the example, the font can be Google hosted with a web safe fallback if required. There are controls for font family, fallback font, size, color and line height.
The last line can have the copyright info and the copyright year can be added and updated automaticlly by checking a box. The copyright sign © is created by inserting the HTML which is &copy;
Email Link
The email link has a field for the email subject line and the address is entered in three boxes for email name, domain and domain extension. The @ and the period are filled in using Javascript and this gives basic protection from spammers using scraping software to harvest email addresses from websites.
Scroll Top
The smooth scroll to the top function has a control for setting the scroll time in milliseconds.