Responsive Hero & Navigation

This hero will set a page design apart from the rest by having a layout designed to show the purpose of the website and to place the navigation in the best possible location on desktop and mobile devices.
The three column, three row grid layout has an optional logo link, an articel and the navigation menu.
Images
The image is inserted in two sizes using the HTML5 <picture> so that there is an alt text attribute for keywords for the search engines and have a lazy load option.
Logo
The logo is at the top left with a max width setting and is configured as an internal link - usually to the home page.
Article
The article has …

• A heading with controls for adding a text shadow and letter spacing
• A paragraph which can run to several lines
• An optional CTA (call to action) style internal link with background hover animation
• Optional animation using the ThemeKit custom stylesheet with a choice of seventeen types

Navigation

The vertical navigation can have any number of links. When the height excedes that of the hero the overflow will scroll.
The header has a trigram for heaven (hamburger) icon and a text field.
The navigation can be open or closed on load and has a checkbox for setting the open/closed state on mobile devices.
Links
The links have a background hover animation and a control for setting a different background for the current page link.
Open/Closed
Follow the link below to see the closed on load state …

Mobile Phone Testing

Over 60% of website visitors will be using mobile devices. To encourage EverWeb ThemeKit users to focus more on how their page designs render on smart phones this litle simulator can be inserted on a page of any project so that the mobile phone view of the website can be checked out in Preview mode.
ThemeKit Mobile Phone
This simple widget can save a lot of time when previewing and a lot of embarasment when published.
There are a few controls for styling the body of the mobile phone simulator along with a tab for selecting the page to show.
Landscape Mode
The phone can also be orientated in landscape mode although most visitors will only use this view videos which are set to play inline.
Download & Install
Download the ThemeKit Phone Simulator from the link in the Read-Me-First file in the theme pack.
Insert the widget on a blank page on its own and link it to the home page.
Create a temporary link to it on the home page or in the navigation menu.
Open the project in preview mode and test the pages.
Before the site is published to the server, remove the link to the page with the simulator.