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.
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.
This widget is included in the Full Width widget pack.
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.
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.