Hero Header & Vertical Navigation

The header has a full width, fixed height background image with an optional logo, an h1 heading for the website name, an optional h2 heading for the page name and an optional CTA style link tab to act as a smooth scrolling link to an anchor further down the page.
The built in vertical navigation can have up to fourteen links with the last one having the option to be configured as external links.
The navigation can be switched to the left side by checking a box and its position can be adjusted in relation to the top and left or irght of the browser window.
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 required.
Responsive
Drag the browser width to its maximum and then reduce it to about the width of an iPad in portrait mode to see the responsive action and how it is suitable for full site pages which will also be viewed on tablet devices.
Logo
The logo insert is optional and has controls for the image width and its position in relation to the top and the left or right of the header depending on the position selected.
Text
The font can be web safe or non web safe or Google hosted with a web safe fallback.
The headings and optional anchor link are centered both horizontally and vertically. There is a control for adjusting the vertical spacing.
The main h1 heading for the website name has controls for letter spacing and for adding a text shadow.
The optional h2 heading would be used for the page name or an advertising hook to encourage visitors to click or tap the CTA link.
The headings have a common control for background color and its opacity and border radius.
Smoth Scroll Anchor
Checking the box next to "Show Anchor Link" reveals a chevron down icon with options for color, hover color and the tab background color and its opacity. This is used in conjunction with any of the Anchor Target widgets to create a smooth scroll option to any point on the page.
In this situation, the tab's role is that of the primary CTA (call to action). Clicking or tapping it will smooth scrol to the secondary CTA which could be a Hero Info Links widget with details and links to services or a Hero Image Links widget priving a click through to products.
Navigation Menu
The navigation has controls for positioning it left or right and for setting the distance from the top and the left or right of the browser.
The container can be adjusted for width, background color and its opacity and box shadow radius and color. This allows it to have the apearance of floating over the image.
The individual links can be styled for font size, color, hover color and the current page color if this option is selected.
The link tab background also has controls for color and opacity to enable a good compromise between transparency and readability.