Hero Header - Fade In Navigation
The header has a hero image, animated heading and overlay and a slide in right navigation menu. It is supplemented by an overlay heading with optional logo and a contact bar with phone number which switches to a "Call Me" button, an email icon and a contact form which opens in a modal window.
Header Widget
The image is full width, fixed height responsive. The image height can be adjusted and it becomes 100vh to fill the screen of mobile phones in portrait mode.
The image is inserted in two sizes - one for computers and tablets in landscape mode and the other for tablets in portrait and mobile phones.
The images in the example are 1200px x 800px and 800px x 533px which give good enough quality without effecting download time too much.
The overlay has vertically centered heading and controls for adjusting the background color and its opacity. The overlay can animate in with controls for setting the animation time and delay in seconds.
Navigation
The fade in navigation is opened by a "hamburger" icon at the top right and closed by an " X" icon. The links are centered horizontally and vertically and background overlay is adjustable for color and opacity. The vertical spacing of the links can be adjusted.