EverWeb Widgets

Headers - Navigation - Toolbars

EverWeb widgets for creating headers with navigation and toolbars with functions for phone, email, search and contact.
Click any widget icon to see the demo …

View CartAdd To Cart

Fixed Header

The image is full width, responsive and fills the height of the browser or device window. It is fixed in position to allow the content below to scroll over it.
The full size overlay can animate in on page load and has controls for the animation time and delay which are set in seconds. The overlay has a centered heading and there is an optional scroll down function.

Header/Fade Navigation

The header has a hero image, animated heading and overlay and a slide in right navigation menu. he fade in navigation is opened by a "hamburger" icon at the top right and closed by an " X" icon.
TThe links are centered horizontally and vertically. The background overlay is adjustable for color and opacity and the vertical spacing of the links can be adjusted

Header/Navigation

The header has two block items - a heading with an optional logo and an inline navigation that switches to a vertical drop down on mobile devices.
Below the break point, the navigation switches to a mobile style dropdown which has the option to show the current page link in a contrasting color.

Header/Right Navigation

The header has a hero image, animated heading and overlay and a slide in right navigation menu. It is supplemeted by an overlay heading with optional logo and a contact bar with phone number which switches to a "Call Me" button, an email icon and a contact form which opens in a modal window. The slide in navigation is opened by a "hamburger" icon at the top right and closed by an " X" icon.

Header/Side Flashing Navigation

The header has a hero image, animated heading and overlay and a slide in right navigation menu.
The slide in navigation is opened and closed by a "hamburger" icon and can be positioned left or right.
The "hamburger" icon has controls to adjust the color and hover color. For better visibility, it has an optional flashing animation.

Header/Slide Navigation

The header has a hero image, animated heading and overlay and a slide in right navigation menu. The image is inserted in two sizes - one for computers and tablets in landscape mode and the other for tablets in portrait and mobile phones. The slide down navigation is opened and closed by a "hamburger" icon at the top right. The links are centered horizontally and spread out vertically to fill the available space.

Social Nav/Header

This widget creates a hero image header with accented h1 heading. The image is inserted in two sizes for computer and mobile devices.
The vertical social media navigation has Font Awesome icon links and there are options to add an email and a phone button link.

Sticky Header

This is a hero image header with an overlay and h1 heading which animate in on page load. There is an optional scroll down function which scrolls to the next item when the chevron icon is clicked.
The header is fixed in position so that the content below scrolls over it. Use suitable EverWeb widgets which have a full width container with background opacity adjustment below this header.

Resize Header/Navigation

The header shows a logo, h1 heading for the website name and an inline navigation when viewed on computers. The header resizes on scroll after a preset scroll amount.
On mobile devices, the header resizes and displays a "hamburger" icon to drop down a vertical navigation on click or tap.

Contact Toolbar

The contact bar can be stand alone or be placed below an item and moved up to overlay the bottom as can be seen in the example above.
It has options for adding a phone number/phone button, contact form button and an email link. The phone number changes to a phone icon on mobile and the contact tab opens a contact form in a modal window.

Search Toolbar

The spy glass icon opens a modal when clicked. This has a text introduction and a custom Google search feature.
The scroll down icon has a field for entering a title and a control for setting the scroll time in milliseconds.
The email link has the option for showing a title on hover and has basic spam protection built in to stop spammers using scraping software from harvesting it.

Scroll Down Toolbar

The scroll down bar can be stand alone or be placed below an item and moved up to overlay the bottom.
The phone number is displayed on computers and tablets. On mobile phones, this switches to a phone icon which places the call when clicked or tapped.
The smooth scroll down chevron is in the center with a spam protected email function to the right.

© EverWeb Widgets -