Full width Soliloquy slider with Header floating on the top in Genesis

After seeing my last post titled How to add a background image for Header and About section in Modern Portfolio Pro Davinder asked,

Looks cool, can we replace background image with Responsive slider?

In this article I share the code to

1. register a 'Home Slider' widget area
2. wrap the above widget area's output and Header in a custom div
3. style Soliloquy slider and absolutely position Header on homepage relative to the custom div while taking care of mobile responsiveness

Live Demo

While the active theme used in this tutorial is Modern Portfolio Pro, the code should work in other Genesis child themes as well with minor adjustments.

Step 1

Add the following in child theme's functions.php: