Full Width Resize Header & Custom Navigation

Custom Navigation Styles

This widget creates a header with a fixed and a resize option. Scroll the page to see the resize in action.
It also incorporates the EverWeb default navigation to allow it to move along with the header. This allows extra styles to be added to the navigation which aren't available with the default widget.
NOTE: The header can also be set to NOT resize and also to move on scroll rather than being stuck to the top of the browser.

Full Width Resize Header Widget
Full Width Resize Header Widget
Full Width Resize Header Widget

Widget Setup

Make sure the header height is set to zero in the Page inspector before dragging the widget onto the page.
Check the "Full Width" box in the Metrics inspector and choose "Always On Top" from the Arrange menu.
Set the background color(s) and adjust the gradient color angle if appropriate and the background opacity.
Set the scroll distance before resize occurs and the height of the resized header.
Set a bottom separator width and color if required.
Choose the logo image and set its width.
Set the logo postion relative to the top and left and its resize width and resize position top.
Check the box if the logo is to be a hyperlink and choose the "Link to:" page. For an external link, check the box, enter the URL and check the next box if the link is to open in a new window.

Heading

Enter the heading text and the font family name. Check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the font style, weight, size and letter spacing. Note that any letter spacing will default to zero on resize.
Set the font size on resize and the font color.
Set the heading position relative to the top and left both in the on load position and on scroll resize position.
Check the box if the heading is to be a hyperlink and choose the "Link to:" page. For an external link, check the box, enter the URL and check the next box if the link is to open in a new window.

Navigation

Insert the navigation widget. Check the "Full Width" box in the Metrics inspector and choose "Always On Top" from the Arrange menu.
Set the navigation widget in the required vertical position. The horizontal position doesn't matter since the widget settings will align it to the right at the required distance from the right.
Use the settings shown in the screenshot to the left and choose ONLY the font family.
Do NOT set any other styles. These will be done in the Resize Header widget.

Full Width Resize Header Widget

Navigation Position & Styles

Remember to select the heading widget when setting the navigation styles - not the navigation widget!
Set the navigation resize distance from the top and the spacing from the right hand edge of the browser.
Set the link text color and its hover color.
Set the link tab background color or check the box for a transparent background.
Set the link font size and the minimum width of the tabs if required.
Set the tab spacing if required and the top/bottom and left/right padding.
If a verticl link separator is required, set the above value for "Spacing" to zero and then set the separator width and color.
Spaced tabs can have their corners rounded if required using the "Corner Radius" control.

Drop Down Menu Styles

If the site has directories, set the styles for the drop down menus.
Set the font size, color, hover color and the background color and its opacity.
Set the drop down menu maximum width.
Use the value for "Padding Left" to space the link text to the right.
Use the value for "TB Padding" to increase/decrease the link tab height.
Use the slider to round the bottom corners of the drop down list if required.
Set the link separator color and height if required.

Resize & Fix or Float

For resize on scroll, check both boxes.
For a fixed, sticky header, check the "Fix" box only.
For a floating header, leave both boxes unchecked.

This widget is included in the Full Width widget pack.

Background Color On Resize

To change the background color and its opacity on resize, check the box and set the resize background color and its opacity.

Tap To Close

The last box in the widget settings - Tap to close - should be checked if the page is likely to be viewed on a tablet device such as an iPad.
This inserts a script to allow the visitor to close the navigation menu dropdowns by tapping anywhere off the navigation.

Full Width Resize Header Widget
EverWeb Video
Click To Play

Video Instructions

The instructional video can be seen in EverWeb by clicking the ? icon at the top right of the widget settings panel.
Click the icon to the right to lauch the video in a modal window.