Fixed Background Footer in Genesis

How to create a footer like this https://briangardner.com/ or http://siddharth.is?

This tutorial provides the steps to combine footer widgets and footer into a single div, relocate it outside the .site-container, and set it to be fixed so it comes into view with a "revealing" effect.

We are going to use a small bit of jQuery code to dynamically set the bottom margin of .site-container to be equal to the height of our custom footer wrap div and set this to be triggered not only on document window load but also whenever the window is resized for screen widths > 767px.

While the tutorial has been written for Genesis Sample child theme, it should work with minor adjustments in any Genesis child theme.