In my tutorial requests Trello board, a user asked:
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.
Step 1
If your child theme's functions.php does not already have
add_theme_support( 'genesis-footer-widgets', 3 );
add it. Change 3 to the number of footer widgets you'd like to use.
Go to Appearance > Widgets and drag your desired widget(s) into the Footer widget areas.
Step 2
Create a file named say, main.js in the child theme's js directory having the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
