CODEWITHSUNDEEP
jquerywordpresscsswordpress-themingsticky-footer
LukePatrick
LukePatrick

Reputation: 39

Genesis WordPress Sticky Footer via CSS/jQuery

Alright, Folks, I'm driving myself batty with this one.

For a client, I've been making loads of sites with Genesis & WordPress. However, on certain sites the theme doesn't look fantastic without a sticky footer.

The problem is that no good sticky footer seems to be around specifically for Genesis. This results in what you see here on the homepage:

Essentially, the content isn't long enough, so the footer doesn't rest at the bottom, usual suspects, etc. I've tried editing functions.php in conjunction with CSS, I've tried raw CSS fixes, and I've also tried some jQuery footers. No such luck.

The fix I'm using now that works is this: 

/* Sticky Footer Fix - It's like "Dirty Dancing" & "Footloose" Had a Baby . . . Mmmmm . . . */

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {height: 100%;}

#inner {min-height: 79%;
    margin-bottom: 66px; /* must be same height as the footer */
    overflow: hidden;}  

#footer {position: relative;
    margin-top: -66px; /* negative value of footer height */
    height: 66px;
    clear:both;}

It works alright, but it's just not accurate enough for my taste. You can view what it's doing at this site

So here's my question:

What's the best way to make a footer stick to the bottom of the page in Genesis when content is not long enough?

I'm amazed it's been this dang hard, so I'm assuming I'm just missing something. Surely other people are doing this and have a fix running.

Any thoughts (CSS or jQuery) are appreciated! Seriously done losing sleep over this one.

Upvotes: 0

Views: 1877

Answers (3)

user3766276
user3766276

Reputation: 21

This worked great - I added this to the custom CSS stylesheet and - sticky footer:

.site-footer {  
     position: fixed;
     bottom: 0px !important;
     width: 100%;
     min-height: 100px; // change to height of your footer
     padding-top: 20px; // change padding to desired amount
     padding-bottom: 20px;
     left: 0;
     margin: 0;

}

Upvotes: 1

LukePatrick
LukePatrick

Reputation: 39

Actually, I've sorted this one out myself!

It's not a perfect solution, in that it uses jQuery and not pure CSS. But if you're using the Genesis Framework and need a sticky footer fix, it's incredibly simple.

Just download this plugin I've put together, install it as normal, and then activate. Assuming you've followed the instructions within the README.txt, everything will be gravy!

Thanks to @Shelton for the help, as well as to this article by Chris Coyier (http://css-tricks.com/snippets/jquery/jquery-sticky-footer/).

Here's the link to the actual plugin:

http://kangabloo.com/Kangabloo/Public/GenesisStickyFooter1.0.zip

Happy theming!

Upvotes: 0

undefined
undefined

Reputation: 808

You could try something like this:

body{
    position:relative;
    height:100%
}
footer{
    position:absolute;
    top:100%;
    margin-top:-66px;
}

Upvotes: 0

Related Questions