Overlay Navigation
Inline navigation switches to drop down below the break point.
Overlay, fix & show current page options.
EverWeb Widgets
Overlay Navigation
The navigation is inline when viewed on wider screens and switches to a "hamburger" icon on touch devices. The links are inserted using a modified version of the EverWeb widgets API Assets List. The links can be to an internal pages, an external page or file or an internal file.
The links can use a web safe font or a non web safe or Google hosted font with a web safe fallback. The link tabs have controls for setting the font size, color, hover color, background color and its opacity, minimum width and the horizontal and vertical spacing.
The mobile drop down has controls for setting the background color and its opacity, drop down width, position from the top, the break point at which it appears and the separator width and color.
The "hamburger" icon has controls for setting the icon color, background color and opacity and its position relative to the top and right.
The inline navigation background color has an opacity slider and the links can be aligned left, center or right.
Current Page Indicator
The current page can be indicated with a contrasting color and has the option to have an animated underline. The underline has controls for setting the color and the animation delay and duration.
Navigation Position
The navigation can be placed anywhere in the stack of widgets on the page or, as shown in this example, positioned below a hero item and made to overlay it at the top by checking a box.
There is also a checkbox to fix the position of the mobile version of the navigation so that it always remains in view.
Contact Bar
The toolbar can be placed anywhere on the page or be inserted below an item like a hero image and appear as an overlay at the bottom as shown above.
The bar has a maximum width setting to allow it to be the same width as the content items. It has a phone number, contact link and an email link.
Icons
The icons are created using SVG code so that their size and color can be changed. The icon size can be adjusted and the contact and email links can have a title which shows on hover when viewed on computers.
The toolbar background color control has an opacity slider.
Phone Number
The phone number appears at the left and can use web safe, non websafe and Google fonts. On mobile phones, it changes to a phone icon which will call the inserted number on tap.
Contact
The centered contact icon is configured as a link to the contact page. The link can be internal or external and open in a new window if required.
Email Spam Protection
The email link has fields for the title, recipient email address and the email subject. The email address is entered in three boxes for name, domain and domain extension. The @ and the dot are removed to be replaced using javascript. This prevents spammers from harvesting the email addres using scraping software.
Footer
The footer has a maximum width setting to stop the items spreading out too far at wide browser widths. When viewd on computer there are four inline columns. These rearrange themselves as the browser/device with is decreases.
Phone or Link
The first item is a phone number which will switch to a "Call Me" icon on mobile phone. If the phone option is not required it can be hidden and replaced by an internal link.
Text
The text section can have several lines and the last on can be the © notice with the option to add the copyright year and update it automatically.
Email Spam Protection
The email link has fields for the title, recipient email address and the email subject. The email address is entered in three boxes for name, domain and domain extension. The @ and the dot are removed to be replaced using javascript. This prevents spammers from harvesting the email addres using scraping software.
Scroll Top
The smooth scroll to the top function has a field for entering a title and a control for setting the scroll time in milliseconds.