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.