EverWeb Widgets

Hero Header Horizontal Navigation

Hero Header & Horizontal 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 scroll down anchor link.
The built in horizontal navigation can have up to fourteen links with the last one having the option to be configured as external links.
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.
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.
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.
The navigation is full width, responsive and can be aligned left, center or right. There is also a control for positioning it at the top or the bottom of the header.
The navigation background has controls for setting both the color and its opacity.
The links can be styled for font size, color, hover color and current page color. when this option is selected. There is a minimum width setting which can be used to adjust the spacing of the individual links.
The font can be web safe or non web safe or Google hosted with a web safe fallback.
The headings and optional CTA 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 anchor link.
The text containers have a common control for background color and its opacity and border radius.
Smooth 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 scroll 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.

© EverWeb Widgets -