EverWeb Widgets

Float In Hero Image

Responsive Header & Navigation

Responsive Header

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.
In this examle, the heading is displayed above the navigation. The widget has a check box to switch this so that the navigation is above the heading and logo.
Heading & Logo
The heading has a control for setting its height and can use a web safe font or a non web safe or Google Hosted font with a web safe fallback.
There are controls for setting the font size, mobile font size, letterspacing, mobile letter spacing, font weight, font style and for adding a text shadow.
The font used in this example is the Google hosted "Stint Ultra Expanded" which doesn't have any means of adjusting the font weight. A white text shadow has been added to it to make it appear more prominent.
The logo is postioned at the left and has controls for setting the image width and its position in relation to the top and left.
The controls for background color and opacity set the background for both the heading and the navigation.

Navigation

The main navigation has controls for setting the font size, color, hover color and the link tab background and its opacity.
There are controls for setting the horizontal and vertical spacing of the tabs and the minimum tab width. The navigation can be aligned left, center or right.
The navigation can highlight the current page link with a different color and an animated underline.
Mobile Navigation
There is a drop down for selecting the device type on which the navigation switches to the mobile version. The choices are for tablet landscape, tablet portrait, phone landscape and phone in portrait mode.
The icon color can be set and its position adjusted in relation to the top and right of the header.
The mobile navigation's width can be adjusted and its background color and opacity can be set. There is an option to add a separator which inherits the font color.
Testing
As with all responsive items, it's really important to test this in both the desktop browser and in the iOS Simulator on a tablet and phone in both landscape and portrait modes.

iOS Simulator

Animated Header

The header image is created with the Ez In Hero Float widget in the EZ Animate widget pack. This has three animations, float image in, float heading in and fade overlay in.
The image can have a rotate animation added to it that can be set to any angle and the direction reversed.

Hero Float