ThemeKit Columns

Hero Navigation

The EverWeb ThemeKit Hero Navigation widget has a header and a two column grid above the breakpoint.
The header has an optional logo which is configured as an internal link and a heading with optons for using a Google hosted font.
The image is in column one which has responsive width and the navigation menu is in a fixed width column at the right.
Layout Change
On tablets in portrait mode the image spans both columns and the navigation disappears to be replaced by an animated action tab in the header,

Navigation

The navigation has adjustable width, fills the height of the container and any overflow will scroll into view. The heading has the option to add a scroll down icon and the vertical scrollbar can be removed if required,
The links have a background hover animation, and an optional chevron right icon. The links can be separated as shown in the example and the current page item(s) have a different background color.

Three Columns

Layout

The grid has three equal columns when viewed on computers and tablets in landscape mode.
Media Queries
Below the break point the layout switches to two columns with the first column spanning column 1 and two in row one.
On phones in portrait mode the grid has one column and the items are stacked.

Images

The images were sized and optiomised before importing into EverWeb.
The first image is larger since it spans two columns on tablets in portrait. It was sized to 720 x 540px (63KB).
The other images were sized to 400 x 300px (30KB).
The images have a lazy load option which should be tirned on if the item is not in the viewport on page load.

Links

Each column has an optional link. Links can be turned on individually.
The links can be configuredto opem internal or external pages and have a new window option.
Styles
The links are positioned at the bottom, have controls for max width and border border radius and a background hover animation.

Home