Navigation

Navigation design has changed a lot in recent years due to the large number of visitors using touch devices.
Old Style
Traditonal navigation with horizontal links and drop downs at the top of the page has proved to be ineffective at encouraging vistors to click through to other pages.
New
A vertical navigation centered in the browser/device window has proved to be the best option.
The much use mobile dropdown nav with a trigram for heaven (hamburger) action tab at the top left or right is really awkward for mobile device users. The action tab needs to be in the bottom half of the screen - obvious when you think about!
Directories
Dropdowns for directory links have also been shown to be a poor method of navigating larger sites. For small to medium size sites a section navigation works better than most although a filter navigation is the best way to get visitors to the info they are searching for.
To sum up …

• Vertical rather than horizontal
• No dropdown for directories
• Show all pages at once if possible
• Provide categories for larger sites
• Block style links with a minimum with of 40px and height of 30px
• Mobile nav overlay in the center of the screen
• Mobile action tab (hamburger) in the bottom half of the screen
• Use SVGs rather than PNG or font icons

Filter Navigation

The navigation used on this section of the EverWeb ThemeKit site can have any number of links and automatically generates the category links using the category name added to the links in that category.
The active category is denoted by a different background color and there is an optional separator between the category and the page links.
Action Tab
The tab has an animated icon with open and close states. When viewed on browser/device window widths above the breakpoint the tab is at the top right and can have optional text.
Below the breakpoint the tab becomes square and moves downwards for mobile user convenience. Its distance from the top is set in vw (viewport units).
Position
Since the navigation has a fixed position the wdget can be inserted at the bottom on the EverWeb design canvas out of the way below the footer widget.

Parallax Hero

Parallax scrolling is not recommend for responsive pages that will be viewed on mobile phones. Unless a separate version of the website is create for these devices it's best to avoid parallax scrolling.
A parallax hero item at the top of the page will work well on all devices withour creating too much confusion.
Images
The image is inserted in two sizes. Those used in the demo were sized to 1200 x 800px and 800px x 720px. The images were resized and optimised before importing into EverWeb to reduce their file size for fast loading in the browser.
Article
The article has a heading, text and one or two links. It can be aligned left, center or right and top, center or bottom and has an optional scale in animation
Parallax
The parallax scrolling is created using a small, custon jQuery plugin with a slider to adjust the parallax from fixed to relative and anywhere in between.