EverWeb Widgets

Responsive Grid Fixed Header

EverWeb Widgets

Resize Header + Fixed Header

Resize Header

The header shows a logo, h1 heading for the website name and an inline navigation when viewed on computers. The header resizes on scroll after a preset scroll amount which, in this case, is set to 100px.
On mobile devices, the header resizes and displays a "hamburger" icon to drop down a vertical navigation on click or tap.
The navigation has its position fixed to make it stick to the top of the page. In its default form, it has a clearfix to prevent it obscuring the top of a relatively positioned item below it.. This can be removed by checking a box to allow it to overlay the item below it as shown in this demo.
Like the other navigation widgets, this one can display the current page in a contrasting color and has the option to add an animated underline.

Fixed Image Header

The image is full width, responsive and fills the height of the browser or device window. It is fixed in position to allow the content below to scroll over it.
Images
The image is inserted in two different sizes - one for computers and tablets in landscape mode and one for tablets in portrait mode which will give retina @2x quality when viewed on phones in portrait mode.
The large image is 1200px wide and weigh in at under 200Kb.
The smaller image is 800px wide with a file size of only 40Kb.
These images are inserted using the HTML5 <picture> element which means that they can also have alt text for the search engines.
Overlay
The full size overlay can animate in on page load and has controls for the animation time and delay which are set in seconds.
The overlay has a centered heading which has the option to add a text shadow.
Scroll Down
The optional scroll down tab has a chevron SVG icon and is adjustable for icon color and hover color, position and background color and its opacity.
When clicked or tapped, the tab smooth scrolls to the next item on the page. The anchor is built in to the widget.
Scroll Over
Most of the responsive items created by EverWeb Widgets have two settings for the background color and its opacity. When using these widgets, the Page Content setting in the Page inspector panel should be set to "none".
In the above example, the widget content background opacity is set to zero and the full width wrapper background is set to black with an opacity of 66%.
Testing
It is really important to test responsive pages in the browser at various widths and in the iOS Si,ulator using an iPad and iPhone simulation both in landscape and portrait modes.

iOS Simulator

© EverWeb Widgets -