Responsive Two Level Toggle Flyout Navigation

This new version of the flyout navigation allows the user to add items by entering the page name and using the "Link to:" control to add the file path and avoid having to enter any HTML.
The navigation can have up to nine items with three of these being directories.
Each directory can have between two and six items.
The navigation can have up to six single level links. The last link can be configured as an external link and open in a new window if required.
The navigation sub menus slide out on hover when viewed on a computer and on click when viewed on touch devices like the iPad.
Responsive Menu
This version of the Flyout Menu can be used on responsive pages. When the Full Width box in the Metrics inspector is checked, the menu is placed to the far left of the EverWeb design canvas. Its will appear at the browser or device window edge and the position X can be adjusted to move it away from the edge if required.
When the page is viewed on computers, the navigation is visible and the open/close tab in the corresponding header widget is hidden.
On mobile devices like the iPad and iPhone, the navigation tab appears and the menu is hidden. If viewing this page on a computer, reduce the browser width to see the navigation switch take place.
The menu can use a websafe font or a non websafe or Google hosted font with web safe fallback font. There are controls for adjusting the color, background, background opacity, hover color and hover background color.
The 1px high separator can have a contrasting color or br made the same as the background.
Prior to publishing, the menu should be set to "Always On Top" using the arrange menu or the Metrics inspector.
The navigation can be situated over another object if required. This creates a dead space where any links will not work. To avoid this, reduce the widget height to about 20px before publishing the page.
Toggle Tab Header
The full width, responsive header has an h1 heading for the website name, an optional logo and a "hamburger" style tab which opens/closes the menu itself. Its background opacity is adjustable.
The centered heading can use a web safe font or a non web safe or Google hosted font with a web safe fallback. It position Y can be adjusted to align it vertically.
The heading font size can be reduced when viewed on smart phones and the vertical position adjusted to compensate.
The optional logo can be placed left or right and has conrols for adjusting its position on the X and Y axis.
The navigation tab is created using pure CSS and has controls for adjusting the color, background color and its opacity and the border radius.
The tab can be positioned left or right and its position adjusted on both the X and Y axis.