EverWeb Widgets

RGL Row Switch Nav

This is a header with a CSS Grid layout where the logo and h1 heading are in row 1 and the inline navigation is in row 2 at browser/screen widths above the break point.
On narrower device screens the navigation switches to a "hamburger" icon with a drop down menu. This is inserted in row 1 to the right with the logo remaining in row 1 to the left.
The heading drops down to row 2 to keep it clear of the other two items.
Header
The header has three height settings - one for the height at full width, one for the height below the breal point and another for the height on mobile phones. The last one would be used to increase the height if the heading text is long and needs to return to a second line.
The heading background has controlss for the background color and its opacity.
Logo
The logo is optional and has controls for shoosing the image, setting its width and positioning it relative to the top and left.
Heading
The heading can use a web safe font or a Google hosted font with a web safe fallback. It has controls for font size, mobile font size, position from the top at full width and mobile, letter spacing and color.
Inline Navigation
The navigation inherits the font family selected for the h1 heading. It has controls for font size, color, hover color, separator width, top/bottom and left/right padding and minimum width.
Drop Down Navigation
There are controls for setting the "hamburger" icon color and its position relative to the top and right. The drop down has controls for width, separator width, border width and color and border radius.
Links
The links are added using a modified version of the EverWeb widget API assets list and can be configured to open internal or external pages or files.
Break Point
The break point at which the heading drops down to the second row can be set for tablets in landscape, tablets in portrait, mobile phone in landscape or mobile phone in portrait mode.

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 ©
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.