Sticky Footer

[emasai]

I am trying to add a sticky footer to push the footer down to the bottom when pages have little content. The only way I know how to do this is by using the hooks - putting the new footer html in the wp-footer hook and then deregistering the Genesis footer in the functions file.

I want to put all the code in the functions file and not use the hooks for just this one thing. Unfortunately, when I use the following code my entire footer scoots up the page and only a sliver of it shows. What am I doing wrong?
Site is http://66.147.244.238/~mericbj6/

//* Customize the entire footer
remove_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', 'custom_footer' );
function custom_footer() {
	?>
    <div class="footer-wrap">
	<div class="footer-top">
	<a href=""><img src="http://66.147.244.238/~mericbj6/wp-content/themes/am/images/AUP-logo-footer.jpg" /></a>
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">Blog</a></li>
		<li><a href="">Register Support</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Table of Contents</a></li>
		<li><a href="">Amazon</a></li>
		<li class="last"><a href="">Contact</a></li>
	</ul>
	</div>

	<div class="footer-bottom">
	<a href="">American Unity Party</a>
	<ul id="footer-social-buttons">
            <li><a href="" class="first"></a></li>
            <li><a href="" class="second"></a></li>
            <li><a href="" class="third"></a></li>
      </ul>
	</div>
    </div>
	<?php
}

Thanks

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[PhilMurray]

hi

I would like to have a sticky footer [ie: the footer always remains at the bottom of the browser or device window]

1. is this possible?
2. How can I achieve this in a genesis child theme?

thanks

Phil

[bcoco]

This worked for me, using Genesis 2.0 (I'm using a child theme I'm developing off of the sample):

/* Sticky Footer 
------------------------------------------------------------ */
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
.site-container {
   min-height:100%;
   position:relative;
}
header {
   padding:10px;
}
#site-inner {
   padding:10px;
   padding-bottom:120px;   /* Height of the footer */
}
footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:120px;   /* Height of the footer */
}

Hope that helps!

[bcoco]

Whoops - that #site-inner should be .site-inner (class, not id). My bad.

Oh, and if you're using the Genesis 1.x structure, then this also works (or did for me) :

/* Sticky Footer 
------------------------------------------------------------ */
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#wrap {
   min-height:100%;
   position:relative;
}
#inner {
   padding-bottom:120px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:120px;   /* Height of the footer */
}

note: I removed the padding in the header and inner divs, because it's not really needed...

[Author]

Posts