EverWeb Widgets | Full Width

Full Width Header

Logo Links & Searchbox Options

The full width header has options for two logo/icons which can be configured as hyperlink to an internal or external and to open in a new window if required. One icon can be placed relative to the browser left and the other to the right.
The h1 heading has the option to use a non web safe or Google hosted font with a web safe fallback.
The optional searchbox is positioned relative to the browser left and, like all the other items, its vertical position can be adjusted. The box has several styling options including a transparent background control which has been turned on in the example on this page.
The header can have a two color gradient background if required and both the gradient angle and the opacity can be adjusted.

Full Width Header Widget
Full Width Header Widget

Widget Settings

The header height in the Page inspector should be set to zero.
Insert the widget, check the "Full width" box in the metrics inspector and adjust the height using a drag handle or the Metrics inspector.
Set the background colors and adjust the gradient color angle if appropriate and the background opacity.

Check the box to show the left icon if required, choose the image and set its position relative to the top and left.
To create the logo as a link, check the box and choose the "Link to:" page.
For an external link, check the box and enter the URL.
Check the "Open in a new window" box for either style of link if it is to open in a new window.

Full Width Header Widget

This widget is included in the Full Width widget pack.

Heading

Enter the h1 heading text which is normally the website name.
Enter the font family, check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the font size, style, weight, letter spacing and color.
Adjust the headings's position relative to the top and left.

Site Search

Check the box to add the site search box, adjust the width and set the position relative to the top and right.
Check the box to apply a transparent background. Otherwise, choose the background color and set the corner radius and the box shadow color and radius if required.
Set the color of the searchbox text field border.
Enter the button text, choose the font and set its size, background color and font color.
Set the button border width and color and the corner radius if required.

Icon Link B

The second image is set up the same as the first and has the same options. In this case the image is adjust relative to the top and right.

Tap To Close Navigation

The last item in the widget settings is a checkbox labelled "Tap to close".
This should be checked if the header is used along with the EverWeb default navigation and the page is likely to be viewed on a tablet device such as an iPad.
On a touch device, there is no means of closing a navigation dropdown once it is opened - apart from clicking another dropdown or link. Checking this box will add a javascript to the page which allows touch device users to close a dropdown by tapping anywhere off the navigation menu.

Full Width Header Widget