Responsive Header & Navigation

The widget creates a responsive header with built in navigation suitable for use with full page scrolling widgets. The header has adjustable opacity and can be fixed in position to make it sticky by checking a box.
The navigation is inline when viewed on computers and switches to a drop down menu on touch devices. The drop down is opened by tapping a "hamburger" style icon.
If viewing this page on a computer, reduce the browser width or use the browser's responsive mode to see the change in styles.
Logo
The logo is optional and can be positioned in relation to the top and left. It can be configured as an internal link.
There is an option to show a box shadow on hover and checkbox to allow the shadow to conform to a round image.
Font Styles
The widget can use a web safe font or a non websafe or Google hosted font with a web safe fallback. The font family set for the heading is inherited by the navigation menu.
h1 Heading
The h1 heading for the website name is adjustable for size, color, font weight, font style, letter spacing and relative position for the top.
The heading can have a text shadow if required with controls for shadow radius and color.

Header
The header itself has controls for setting the background color and its opacity and for creating a bottom border as a separator adjustable for border width and color.
There is a "Fix Header" checkbox if a sticky header is required.
Full Site Navigation
The inline navigation is adjustable for font size, color, hover color and relative positon from the top. It can be set to indicate the current page by checking a box and setting a contrasting color for the active link.
The navigation links can have a vertical separator which has controls for width and color.
Mobile Navigation
The mobile menu drop down has its own control for background color so that the opacity can be adjusted independently of the header background.
There are controls for setting the icon color and its position relative to the top.
The heading font size can be reduced when the page is viewed on a mobile phone and the position of the h1 heading - relative to the top - adjusted.
Navigation Switch
The navigation is switched from inline on computers to drop down on touch devices using CSS media queries. The point at which this can occurs is the " break point". This is the browser or device screen width at which the changes take place.
The break point is set to 1059px so that the mobile version of the menu will appear when the page is viewed on an iPad in landscape mode.
Links
The navigation can have up to fourteen links. The last two links can be configured as external links if required and have a checkbox for selecting the option to open in a new window.
Stacking Order
The header navigation should obviously be inserted after the scrolling widget so that it sits on top. Otherwise, bring it to the front using the Arrange menu or set it to "Always On Top".

© EverWeb Widgets -