Mobile Icon Navigation

These two widgets create a tab with an icon which drops down the navigation on click or tap.
The icon is created using CSS rather than an image to make it suitable for mobile website use.
The icon color is adjustable and the background has an opacity slider so that it can be set to zero to blend in with the header background if required. The tab corners can be radiused.
The main navigation has the standard "hamburger" icon while the sub navigation has the "four square" icon which should be familiar to most mobile device users.
The icon tab can be situated to the left or right of the dropdown.
Dropdown
There is a control for showing the dropdown while editing to make life a little easier.
The drop down width and its vertical distance from the icon are adjustable.
The vertical spacing control is so that the dropdown can clear the header if the icon tab is inserted in it.
The dropdown can be styled for background color and opacity and can have a radiused border if required.
Links
The main navigation can have up to fourteen links. The last two can be configured as external ones. The sub navigation can have up to twelve links which should be more than enough for a directory.
The links can use a web safe font or a none websafe or Google hosted font with web safe fallback. There are controls for adding a separator with variable width and color.
Current Page
The navigation can indicate the "current" page by checking a box and setting a contrasting color.
Prior to publishing, the box is checked to hide the dropdown and the widget is brought to the front or set to "Always On Top" using the Arrange menu.