Adding a Sticky Footer to Genesis Theme with Flexbox

A sticky footer refers to a web page footer that sticks to the foot of the page even when there is not a lot of content on the page, without one the footer will ride up leaving the layout somewhat unsightly.

Need a sticky footer here

Need a sticky footer here

 

There are various methods to add a sticky footer, some javascript and others CSS, you can add a sticky footer to a Genesis layout with some simple flexbox rules.

/* Sticky Footer */

.site-container {
 display: -ms-flexbox;
 display:-webkit-flex;
 display:-webkit-box;
 display:flex;
 -ms-flex-direction:column;
 -webkit-flex-direction:column;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 flex-direction:column;
 min-height:100vh;
}

.site-inner {
 -ms-flex:1;
 -webkit-flex:1;
 -webkit-box-flex:1;
 flex:1;
 width: 100%;
 padding: 20px 0;
 word-wrap: break-word;
}

This will push down the footer to the bottom of the viewport.

genesis-flex-box-sticky-footer-in-place

As long as the Genesis theme follows the default structure this CSS will work – so the site-container is the parent of site-inner and site-footer which are adjacent sibling elements as in the layout below.

genesis-layout-structure

Check with caniuse to add the most up to date required vendor prefixes. Flexbox is certainly the way to go in the future,  check out Mike Hembergers – fully flexboxed Genesis starter theme.

 

IE 10 & 11

*An issue arose in that this fails in IE10 & 11 and the container collapses – so the container needs to display as block in these browser versions – which you can target with…

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 
 .site-container { display: block; } /* IE10 & IE11 */

}

 

Safari

*Another issue arose with some older Safari versions, these are harder to target, you could inject a class via javascript…

(function($){
/* Adjustments for Safari on Mac */
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
$('body').addClass('safari-mac'); // provide a class for the safari-mac specific css to filter with
}
})(jQuery);
//https://stackoverflow.com/questions/2838664/how-to-target-safari-for-mac-only/10137912
view raw safari.js hosted with ❤ by GitHub

Then apply CSS

.safari-mac .site-container {
display: block;
}
view raw safari.css hosted with ❤ by GitHub

Ref

2 Comments

  1. Koen Adams on September 30, 2017 at 2:28 pm

    Looks like this is working really well!! Thank you. Best and easiest solution I’ve found so far 🙂

  2. jared on January 2, 2017 at 4:14 pm

    and yes! That worked well for me!

Leave a Comment





%d bloggers like this: