EverWeb Widgets

Responsive Grid Layout Elements [1]

Navigation menus, footers, box links and a header for using with Responsive Grid Layout widgets to create better, more efficient web page designs..
Click any widget icon to see the demo …

View CartAdd To Cart

Overlay Navigation

The navigation is inline when viewed on wider screens and switches to a "hamburger" icon on touch devices. It can be placed anywhere or positioned below a hero item and made to overlay the top by checking a box.
The navigation can indicate the current page with a contrasting color and the mobile icon can be made sticky so that it always remains in view.

Slide In Navigation

The navigation is a full height overlay that slides in from the left or right when the "hamburger" icon is clicked or tapped. The icon can be placed left or right.
The links are spaced out vertically and can have a hover scale animation when viewed on computers. The amount of scale is adjusted using a slider.

Curtain Navigation

The full height overlay drops down on clicking the "hamburger" icon with an expanding curtain like animation The links are spaced out vertically by setting the value of the container's display property to "grid" and setting the the links to align themselves in the center of the row created by the grid.
The current page link can be indicated using a contrasting color by checking a box and setting the link color.

Draw Box Links

The widget creates a row of box links with a border created with a draw animation. The animation is created using CSS and fires on hover when viewed on computers and on page load on touch devices.
Any link can be configured to open internal or external pages or as a scroll down to an anchor on the same page. The links can be placed anywhere and be made sticky if required.

Drop Navigation

The navigation slides up and down on clicking the "hamburger" icon. The navigation is visible during setup and then hidden by checking a box.
The background can be a solid color with an opacity setting or an image. The links can have a hover scale animation and the current page indicated by a different color.

Flyout Navigation

This flexible navigation flies out from the top left corner when the "hamburger" icon is clicked.
The links display inline at wider browser widths and then vertically when the browser/device screen width is less than the break point setting.
The links can have a scale on hover animation and the current page can be indicated using a contrasting color.

Contact Toolbar

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.
It has a phone number that switches to a "Call Me" button on smart phones, a contact icon that links to the contact form page and a spam protected email button.

Three Column Footer

The footer packs a lot of info into a small space. Column one has a heading and text and an option for a phone number that switches to a phone icon on phones. The middle column has a heading and text and a spam protected email button. The last column has a heading and block links and a scroll to the top chevron. There is an option to add a © notice across the bottom.

Four Column Footer

The footer has a phone number in the first column that switches to a phone icon on mobile phones. The second column has a text block which can have several lines and a copyright notice can be added at the end. There is a function to auto add and update the copyright year. Next comes an email icon which is spam protected and then a smooth scroll to the top chevron icon.

Header

The full width header has options to add either a phone number/phone button or a logo at the left and an h1 heading. It is design to be used with the navigation menus that use a "hamburger" icon at the top right.
The heading has plenty of styling options including text shadow and the header can have background transparency and a bottom border separator.

Top Nav Single Level

The navigation can have up to fourteen links - the last two can be configured to open external pages and have a new window option. It is inline on wider screens switching to a drop down on mobile.
The inline links can be aligned left, center or right and the current page can be indicated with a different color and an animated underline.

Top Nav 2 Level

A two level version of the Top Nav. It can have up to eight top level links and the last one con be configured to open external pages and in a new window if required.
The navigation can have up to three directories. Each directory can have up to six links with chevron indicators on the mobile drop down.

© EverWeb Widgets -