Viewport Height Slider Widget

These widgets create a full width slider which has its height set to 100vh. This means that it fills the browser or device window on page load no matter what size it is.
Responsive
This page design is fully responsive down to the width on the smallest iPhone in portrait mode. If viewing this on a computer, reduce the browser width and height to see how the layout changes or use the browsers responsive mode.
Sideshow
The slider is navigated using directional arrows on computers and using swipe on touch devices like the iPad and iPhone.
The slides can have a caption and/or a CTA style link. These are turned on globally.
Animated Content
The content section is centered both horizontally and vertically. The captions and links can animate in from different directions on a per slide basis. The animatiion time and delay time are set globally.
Scroll Down
The scroll down function is optional. Clicking or tapping the chevron down icon smooths scrolls the page down to the next item. The smooth scroll script and the anchor are built into the widget.
The scroll down tab can be adjusted for icon color and the background color and its opacity. It can show a title on hover when viewed on computers if required.
Header OptionsThe header version has options for adding a logo and a scroll over function and incorporates the tab to open the mobile version of the navigation menu.
Logo
The logo is absolutely positioned at the top left and has controls for setting its width and position in relation to the top and left.
Navigation
The navigation is a separate item which is placed below the header on the EverWeb design canvas.
When viewed on computers, the navigation is absolutely positioned at the top and center of the header and the links display inline.
On touch devices like the iPad and iPhone, the navigation disappears to be replaced by a "hamburger" icon at the top right. Tapping this will open the mobile version of the navigation menu.
The navigation can be styled with a web safe font or a Google hosted or non web safe font with a web safe fallback. There are controls for setting the font size, color, hover color and the background color and its opacity. The inline navigation has the option for vertical separators and the mobile version can have horizontal separators. These inherit the font color.
The mobile navigation icon can be styled for icon color, background color and opacity and border radius. The drop down has a control to set its width.
Navigation Type
The navigation shown on this page is single level and can have up to fourteen links. The last two links can be configured to open external pages and in a new window if required.
There is a two level version of the navigation which can have up to six top level links and three directories. Each directory can have up to six links.
The mobile version of this navigation has accordion style drop downs for the links in the directories. Click the navigation link tab below to see an example of the two level navigation.
Responsive Design Testing
Responsive layouts need to be tested on the various devices before uploading to the server. There's little point in even considering a responsive design without the proper tools.
Download and install Apple's Xcode which is a free app for developers.
Once installed, create an alias to the iOS Simulator and use it to test designs on the various iPad and iPhone models.