EverWeb Widgets

Responsive Headers & Navigation

The single and two level navigation widgets are used in combination with one of the headers. The header incorporates the "hamburger" icon which opens/closes the mobile version of the navigation.
The tab navigation can be used on its own and the Parallax Nav is used in conjunction with the Parallax Header widget.
NOTE: These widgets require EverWeb V2.8 and above. They should be organised in a folder separate from those used to create fixed width pages.
Click any widget icon to see the demo …

View CartAdd To Cart

Using Responsive Widgets

Creating responsive designs is quite different from fixed width using drag and drop. Please take the time to read the instructions and learn how to create a responsive template page and how to use the widgets.
Make sure the iOS Simulator is available for testing responsive designs in the various devices before publish the site.
Click the icon for info about all this.

Single Level Navigation

The navigation can be used in combination with any of the header widgets which have a built in "hamburger" tab to trigger the mobile version. It appears as inline on computers and as a drop down on mobile devices.
The navigation can have up to fourteen links. The last two links can be configured to open either internal or external pages and in a new window if required.

Navigation With Directories

This is a two level version which has the same style and features as the single level navigation. It can have up to six top level links and three directories. Each directory can accommodate up to six more links. The last top level link can be configured as an external one.
The directories open on hover on computers and accordion style on click on mobile devices.

Responsive Header

The header is used with either version of the AC Nav widgets described above. It has an h1 heading for the website name and can have a color gradient background.
It incorporates a "hamburger" for the mobile nav which can be positioned left or right and has options for either a logo or a phone number which switches to a "Call Me"button on mobile phones.

Tab Navigation

This creates a line of styled tabs which are centered in the browser. When the browser /device width is reduced, the tabs return to two or more lines.
The navigation can be placed anywhere in relation to the other items and can have up to fourteen links with the last two having the option of being to external pages or files.

Image Split Header

The split headers have an info panel with options for a logo, heading, text and one or two CTA style links which sits side by side with a media element when viewed on computers.
This one has an image with overlay caption which slides down below the info panel when viewed on tablets in portrait mode and mobile phones.

Slideshow Split Header

The split headers have an info panel with options for a logo, heading, text and one or two CTA style links which sits side by side with a media element when viewed on computers.
This one has a slideshow which slides down below the info panel when viewed on tablets in portrait mode and mobile phones.

Video Split header

The split headers have an info panel with options for a logo, heading, text and one or two CTA style links which sits side by side with a media element when viewed on computers.
This one has an MP4 video which slides down below the info panel when viewed on tablets in portrait mode and mobile phones.

Vimeo Header

The split headers have an info panel with options for a logo, heading, text and one or two CTA style links which sits side by side with a media element when viewed on computers.
This one has an Vimeo video which slides down below the info panel when viewed on tablets in portrait mode and mobile phones.

YouTube Header

The split headers have an info panel with options for a logo, heading, text and one or two CTA style links which sits side by side with a media element when viewed on computers.
This one has an YouTube video which slides down below the info panel when viewed on tablets in portrait mode and mobile phones.

Parallax Navigation

The navigation is designed to be used in conjunction with the Parallax Header but could also be used with a hero image or banner which is the first item on the page.
The navigation is inserted below the header on the EverWeb design canvas. It appears as an overlay at the top on computer and a vertical stack at the bottom on touch devices.

Parallax Scrolling Header

The parallax scrolling header comprises a hero image with a transparent overlay with heading text and link options. In combination with the parallax image and animated parallax image widgets, it can create a complete parallax page layout.
Use the Parallax Navigation widget to create an overlay nav.

Combined Header & Navigation

A header with logo, heading and inline navigation with up to fourteen links - the last two of which can be external links.
The navigation inline on computers and switches to a drop down on mobile devices which is opened and closed via a "hamburger" icon.

© EverWeb Widgets -