Mobile Header & Dual 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 an h1 HTML heading for the website name and two click to open/close drop down navigation menus - one for navigating the top level items and the other for the current page's directory.
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.
Navigation Icon
The main navigation button uses the "hamburger" style and the sub navigation button is a four square icon.. These are created using CSS so that there is no image to download. The tabs are 30px square to give a large enough target for fingertips and they inherit the color of the h1 heading.
Main Navigation
The navigation drop down lists are visible for editing and the only user option is the font size.
The main navigation can accomodate up to twelve 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.
Sub Navigation
The sub menu is used to navigate the pages of the currently displayed directory and can have up to eight links.
Setup & Publishing
If using master pages, a header/navigation master will need to be set up for each directory.
The header 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.