Sticky Footer

[hankplayer]

I’m interested in applying a sticky footer to my site. I have tried various tutorials using css but haven’t had any luck getting them to work for me.

I would like to keep the footer pushed to the bottom of the browser on pages that don’t have enough content (especially on product categories that don’t have any items). Attached is a screenshot of a page with the footer in the middle of the browser window.

I like this option: http://mystrd.at/modern-clean-css-sticky-footer/

But I’m not sure how to implement it on my site. Can you please help me modify to code to use with Atelier.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

#main-container {
  min-height: 500px;
}

– Kyle

[hankplayer]

Thanks Kyle! That worked great.

[Rui Guerreiro – SUPPORT]

Great. Thanks Kyle.
-Rui

[hankplayer]

I just tested the site on a retina display iMac and ran into the same problem of having the footer pushed up on the page. I assume this will be the case on larger/higher resolution screens. I raised the min-height to 800px, which fixed it on iMac but was too much on a laptop and regular display.

Is there a way to do a true sticky footer?

I found this option: http://mystrd.at/modern-clean-css-sticky-footer/ and this option: http://ryanfait.com/sticky-footer/ but I don’t know exactly how to implement it using Atelier’s CSS.

[Kyle – SUPPORT]

Hi

Those example are for very basic structure. They won’t work with the complex structure of our theme.

– Kyle

[hankplayer]

Thanks Kyle. Is there any way to add this type of option to an upcoming update?

[Rui Guerreiro – SUPPORT]

Will forward it to the development team so they can analyze and consider for a future update.

-Rui

[Swift Ideas – Ed]

Hi @hankplayer

It’s a tricky thing to sort as there are so many varying factors. You can try this css though:

#footer-wrap {
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 0;
  width: 100%;
}
#main-container {
  padding-bottom: 335px; /* This needs to be the same or larger than your footer height */
}

– Ed

[hankplayer]

Hi Ed,

The CSS you provided unfortunately didn’t work. I fiddled around with using a variation of the code that is currently on our main, non WordPress site (www.hankplayer.com), I was able to come up with a solution that worked.

This works by pushing the footer down to stick to the bottom of the browser window on pages that don’t have enough content to fill the page but if the content is more than what will fit in the window, the footer behaves normally.

The CSS I used was as follows:

/* --------------------------------------------
	STICKY FOOTER
-------------------------------------------- */

#main-container {
	padding-bottom: 220px; /* must be same height as the footer */
}

#footer-wrap {
    width: 100%;
	height: 220px;
	bottom: 0;
	left: 0;
	background: #5a5a5a;
	position: absolute;
	margin-top: -1340px; /* negative value that pushes footer to bottom of window */
}

[Swift Ideas – Ed]

Glad you found a solution, thanks for posting it.

– Ed