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;

.site-inner {
 width: 100%;
 padding: 20px 0;
 word-wrap: break-word;

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


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.


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 */




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

/* 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
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



  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: