Hero Image - Responsive Grid Overlay

The navigation slides up and down on clicking the "hamburger" icon. The navigation is visible during setup and then hidden by checking a box.
Background
The background can be a solid color with an opacity setting or an image like the example on this page. Three different sizes of image are inserted - one for each device type.
The images used in this example were cropped to 1600px, 1200px and 800px respectively before importing into EverWeb.
Icon
The "hamburger" icon can be styled for background color and its opacity, icon color, icon hover color and border radius. It can be positioned left or right and its location adjusted using the values for Position X and Position Y in the widget settings.
Links
The links are spaced out vertically by setting the value of the container's display property to "grid" and setting the the links to align themselves in the center of the row created by the grid.
The links are inserted using a modified version of the EverWeb Widget API Assets list and can open internal or external pages or files.
Current Page
The current page link can be indicated using a contrasting color by checking a box and setting the link color.
Fix
The navigation overlay and the "hamburger" icon are absolutely positioned by default. They can be fixed by checking a box so that they always remain in view no matter what the scroll position of the page content is.
Animations
The slide up/down animation can be set in milliseconds. The navigation link hover animation as created using scale on hover. The scale amount can be adjusted in the widget settings. This animation is turned off on mobile devices for obvious reasons!
Setup
The widget should be the last item on the page and be placed below the footer where it won't effect the page content items.
Hero Image
The first item on the page is created using the RGL Hero Image with animation turned on. Follow the link below for more info…