EverWeb Widgets

Responsive Grid Layout Elements [2]

Responsive elements for icon and text slideout and horizontal or vertical navigation. Icon toolbars for social media and other links.
Click any widget icon to see the demo …

View CartAdd To Cart

Font Awesome Horizontal Nav

The links have Font Awesome icons inserted in them and use relative or absolute file paths to configure them to open external or internal pages. The horizontal row of icons is centered in the browser with a maximum width setting.
The links are laid out in a CSS grid that automatically adjusts the link width so that they remain equal no matter how many links are added.

Font Awesome Vertical Nav

The links have Font Awesome icons inserted in them and use relative or absolute file paths to configure them to open external or internal pages.
The vertically stacked links can be positioned at the left or right edge of the browser/device window. The position relative to the top is adjustable.

Ionicon Horizontal Nav

The links have Ionicon icons inserted in them and use relative or absolute file paths to configure them to open external or internal pages.
The horizontal row of icons is centered in the browser with a maximum width setting. The links are laid out in a CSS grid that automatically adjusts the link width so that they remain equal no matter how many links are added.

Ionicon Vertical Nav

The links have Ionicon icons inserted in them and use relative or absolute file paths to configure them to open external or internal pages.
The vertically stacked links can be positioned at the left or right edge of the browser/device window. The position relative to the top is adjustable.

Font Awesome Slideout

The links slide out from the browser/device window left edge on click or tap. The vertically stacked links use Font Awesome icons - each of which can have a different background color.
Each icon has fields for entering a title which will appear on hover for computer users and for the URL. There is an optional scale on hover animation.

Ionicon Slideout

The links slide out from the browser/device window left edge on click or tap. The vertically stacked links use Ionicin icons - each of which can have a different background color.
Each icon has fields for entering a title which will appear on hover for computer users and for the URL. There is an optional scale on hover animation.

Slideout Nav

This navigation slides out from the browser/device window left edge on clicking or tapping the "hamburger" icon. It can be used for a main navigation for smaller sites or as a sub navigation for larger sites with directories.
The links are stacked vertically and there is an option to add a separator that inherits the link font color. There is also an option to indicate the current page.

Slideout Share

This text link navigation has a width setting to accommodate the longest link without the text returning if required. Links are added using the EverWeb Widget API Assets list and there are fields for the link text and the URL.
The links slide in/out when the "hamburger" is clicked or tapped and there is an option to add a share by email link which has a subject and a content field.

Slideout Social

The links are created by inserting icons from the Social Icon set. All the icons are built in to the widget and are selected from a dropdown in the widget settings. There is the option to add a hover scale animation and a title which will appear on hover when the navigation is viewed on computers.
The icon set has an email icon so there is the option to add a spam protected "Email Me" link.

Font Awesome Toolbar

This is a horizontal toolbar using Font Awesome icons. The widget has a link to the Font Awesome cheatsheet. Each link can have a different background color. The icons can be set globally for size, color and hover color.
The toolbar can be relatively positioned anywhere in the stack of widgets or, by checking a box, made sticky and be fixed to either the top or bottom of the browser/device window.

Ionicon Toolbar

This is a horizontal toolbar using Ionicon icons. The widget has a link to the Font Awesome cheatsheet. Each link can have a different background color. The icons can be set globally for size, color and hover color.
The toolbar can be relatively positioned anywhere in the stack of widgets or, by checking a box, made sticky and be fixed to either the top or bottom of the browser/device window.

Social Icon Toolbar

This is a horizontal toolbar using the Social Icon set. The icons are built in to the widget and are inserted by selecting them from a dropdown. They can have a scale animation on hover if required.
The toolbar can be relatively positioned anywhere in the stack of widgets or, by checking a box, made sticky and be fixed to either the top or bottom of the browser/device window.

© EverWeb Widgets -