Mobile Header & Navigation

The header is made full width, responsive by checking the "Full Width" box in the Metrics inspector. It can also be used on non responsive pages if required
It has a built in, optional logo, an h1 HTML heading for the website name and a click to open/close drop down navigation.
Header
The header is only 40px in height to take up the least amount of space on page load and has controls for background color and width and color for the optional bottom border. The border is used as a separator when the header and page background colors are the same or similar.
Heading
The h1 heading is centered horizontally and vertically and can use a web safe font or a non web safe or Google hosted font width a websafe fallback. There are controls for adjusting the font color and size.
NOTE: The header font family, color and background color are inherited by the drop down menu.
Logo
The optional logo has controls for adjusting its size and osition in relation to the top and left of the header.
Navigation Icon
The navigation button uses the "hamburger" style. This is created using CSS so that there is no image to download. It is 30px square to give a large enough target for fingertips and it inherits the color of the h1 heading.
Navigation List
The navigation drop down list is visible for editing and the only user option is the font size.
The list can accomodate up to fourteen items. The first three internal links are obligatory and the last two have the option to be configured as external links using absolute files paths.
In this example, these links are to other sections of the site using a relative file path.
Current Page
There is an option to allow the navigation to indicate the current page. This is achieved by checking a box and setting the current page link color.
Setup & Publishing
If the site is a single level one with no directories, the navigation can be set up on a master page and should be set to"Always On Top" using the Arrange menu or the Metrics inspector.
The last item in the widget settings is a checkbox to hide the drop down on page load.