Genesis themes have an unique way to add a sticky / fixed footer.
If your using a theme that is not a Genesis theme then check out my tutorial: Creating a footer that sticks to the bottom.
Sticky is actually something that sticks to a location on the page. For instance a sticky header would follow along on scroll. A fixed header would not. But sticky and fixed meanings have become blurred.
In the functions.php file or a code snippet add the following PHP code.
//* Sticky/fixed Footer Functions
add_action( 'genesis_before_header', 'stickyfoot_wrap_begin');
function stickyfoot_wrap_begin() {
echo '<div class="page-wrap">';
}
add_action( 'genesis_before_footer', 'stickyfoot_wrap_end');
function stickyfoot_wrap_end() {
echo '</div><!-- page-wrap -->';
}In your style.css file add the following code.
html {
height: 95.5%; /* Adjust as needed */
}
body {
height: 100%;
}
/* New CSS */
.site-container {
height: 100%;
}
/* New CSS */
.page-wrap {
min-height: 89%; /* Adjust as needed */
margin-bottom: 0;
}
.site-footer {
position: absolute;
width: 100%;
height: 80px; /* Adjust as needed */
}Adjust the .page-wrap min height/site-footer height and the html height to fit your site.
For instance for the starter theme I am working on. I had to adjust
html height to 93%
page-wrap min-height to 85%
site-footer height to 150px
For an enhanced edition of Altitude Pro theme I am working on I adjusted:
html height to 97%
page-wrap min-height to 70.2%
site-footer height to 60px
Resources:
https://9seeds.com/tech/sticky-footer-genesis/
https://jsfiddle.net/juroto/HL6Ad/
https://css-tricks.com/snippets/css/sticky-footer/
