Page Header
The header has a hero image, animated heading and overlay and a slide in right navigation menu. It is supplemeted 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 slide in navigation is opened by a "hamburger" icon at the top right and closed by an " X" icon.
The links are vertically centered and the navigation container width is adjustable. Both the link background and the navigation background have controls to adjust the color and opacity and the links can be spaced out vertically and have radiused corners if required.