Top Nav 2
Two level version of the Top Nav for sites with up to three directories
EverWeb Widgets
Two Level Navigation
The navigation is inline when viewed on wider screens and switches to a "hamburger" icon on touch devices. The navigation can have up to eight top level links and the last one can be set to open an external page and has a new window option.
It can have between one and three directoires. Each directory can have up to six links.
The links can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size, color, hover color, background color and opacity, minimum width, drop down width and for setting the separator width.
The "hamburger" icon has controls for setting the icon color, background color and opacity and its position relative to the top and right. There is a drop down menu for selecting the break point at which the navigation switches from on type to the other.
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.