Header & Nav


This combined header and responsive navigation is fixed to the top of the browser window so that it is always in view.
It's role is to provide a transparent background when sitting on top of a full width media item such as the Hero Overlay Banner show here.
When the page is scrolled, the header background changes after a preset distance. This change can be to the same or another color with a different opacity setting.
The header has an optional logo, h1 heading for the website name and an inline navigation which switches to a drop down menu when viewed on mobile device like the iPad and iPhone.
The built in navigation can have up to fourteen links with the last two having the option to be configured as external links to open in a new window if required..
The navigation can indicate the current page using a contrasting color if required.
The header has controls for setting a bottom border which can be used as a separator if needed
If viewing this page on a computer, reduce the browser width to see the responsive action and how the navigation switches from one type to another.
Use the browser's responsive mode to see how it looks on the various types of touch devices or open it in the iOS Simulator.
Refer to the Info section to find out how to set up responsive pages in EverWeb.
The header background has controls for setting the initial background color and its opecity, the scrolled background color and opacity and the scroll distance.
The header can have a leading edge box shadow with controls for setting the shadow color and radius.
Its height can be adjusted using a drag handle or the Metrics inspector.
The logo is optional and has controls for the image width and its position in relation to the top and the left of the header. It can be configured as a hyperlink to open an internal page. In this case it can be given a box shadow on hover to give visitors on computers a clue that it is a link. There is a control for ensuring the box shadow adapts to fit a round logo.
The h1 heading for the website name has controls for setting the font size, weight, style and letter spacing. Its position in relation to the top of the header is adjustable. The heading can have a text shadow with controls for radius and color.
The widget can use a web safe font or a non web safe or Google hosted font with a web safe fallback. The font family is common to both the heaading and the navigation.


The navigation is inline when viewed on computers and aligned right so that it will clear the logo when all fourteen links are used. On mobile devices it switches to a dropdown which is actived by tapping a "hamburger" icon.
Full Site Navigation
This version of the navigation has controls for its position in relation to the top of the header, font size, color and hover color. There is a checkbox to allow the menu to show the current page and a swatch box to choose a contrasting color.
The navigation links can have a vertical separator which is adjustable for width and color.
The links can be aligned left, center or right.
Mobile Navigation
The browser or screen width at which the navigation switches for one form to another is set using the control for "Break Point".
If the mobile version is to appear when the page is viewed on an iPad in landscape mode, the break point is set to 1059px. For a tablet in portrait mode, the value should be set to 799px. If the full site navigation is required on tablets, the break point should be set to 736px so that the mobile navigation appears on the largest iPhone when viewed in landscape mode.
The widget has controls for setting the "hamburger" icon colorand the position of it and the h1 heading relative to the top. There is also a control for reducing the h1 headings font size when the page is viewed on a mobile phone.
The widget needs to have the highest z-index of all the items on the page so that the mobile menu dropdown will appear above everything else. Make sure the widget is set to "Always On Top" using the Arrange menu or the Metrics inspector.

© EverWeb Widgets -