Full Width Active Header & Navigation
Horizontal Active Header Navigation Widget

Description

This widget creates a full width, responsive header with options for a logo and an h1 heading for the website name.
It is designed to be used in conjunction with the default EverWeb navigation menu. The header widget has all the styling options for the navigation - including the active link which indicates the current page.

The widget has a checkbox for fixing the header and navigation so that it remains in position as the rest of the content is scrolled. In this situation, the header and the navigation widget should be selected together and brought to the front using the "Arrange" menu - or set to "Always On Top" - before publishing the page.

The navigation has all the usual styling options with the addition of controls for the active font color, active tab background and the text decoration which has the options of none, line through and underline.

NOTE: Apart from choosing the font and removing the underline, all the EverWeb default navigation styles are adjusted in the active header nav widget rather than the default navigation 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 background opacity and the gradient color angle if required.

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, letter spacing and color.
Set the heading's position relative to the top and left.

Navigation

Drag the default navigation widget onto the page, check the Full Width box in the Metrics inspector and position it in the header.
Set the navigation widget settings to zero and align it left, center, or right.
In the Hyperlinks inspector, remove the navigation menu underlines.
Open the Fonts window and set the navigation font family.
Do NOT set any other styles for the navigation widget. The rest of the settings will be done in the Full Width Active Header Nav widget.

Full Width Active Header Navigation Widget

Logo

Check the box if a logo is required.
Choose the image and set its width and position relative to the top and left.

Full Width Active Header Navigation Widget
Full Width Active Header Navigation Widget
Full Width Active Header Navigation Widget

Link Styles

Select the Full Width Active Header Navigation widget and set the link color and background color.
Set the hover color and background color.
Set the active color, background color and text decoration.
Check the box to remove the tab backgrounds if required.
Set the navigation font size, the tab minimum width and spacing.
Adjust the tab height using the value for Padding TB and set the left/right padding to the required value.
If a separator is required, set the tab spacing to zero and then set the separator width and color.
Set the tab corner radius if required.
Check the box to fix the header and navigation if required. Make sure these items are brought to the front or set to "Always On Top" using the arrange menu.

This widget is included in the Full Width widget pack.

EverWeb Widgets - Active Navigation