WooThemes Canvas Theme – Adding a Sticky Footer
Without further ado, here’s a fast way to change the Canvas Theme by WooThemes to have a sticky footer (which means that it will always display at the bottom of the page, regardless of your content length):
Have any questions or comments about this article, or ways you think it can be improved?
Join the conversation in the comments below, or sign up for my newsletter to recieve periodic updates!
You sir, are awesome. Thanks!
Mine is actually being pushed too far below the screen now, is there any way to adjust the gap to make it smaller?
Sure thing 🙂
What you want to do is first find out how tall your footer is, using whatever browser inspect tool you prefer. Then, swap out both of the
-322pxnumbers in the CSS to whatever the height is (with a minus sign beforehand) – that way it’s offset to the height you need.
I did a quick calculation of my site’s footer to show the process – you can check it out here: https://danielsantoro.com/wp-content/uploads/2015/05/get-footer-height.jpg
Hope this helps!
Thanks for the tutorial, it was helpful thought I’m having an issue where the footer is being forced lower than it should. I have changed the numbers you advised to the height of my footer.
Is the footer container supposed to move on top of the footer widgets container? If so then that’s my problem as the footer container is beneath the widget container.
If you have any advice it would be gratefully received but either way, thanks for the code.
Sorry I didn’t see your comment earlier – it looks like comments were being redirected strangely when I tweaked some settings. 🙂
If you’re still experiencing this issue, then send me an email with a link to your site – I can take a look and share what I find. https://danielsantoro.com/contact/
Hi Danny, Thanks for this post. Unfortunately, I am having the same problem as Daniel Richardson. The footer is pushed way down low on the page and I have to scroll down to see the footer even though there is no content on the page. Any ideas?
Sorry for the delay – I recently changed how my comment notifications worked, and wires got crossed for a little bit. 🙂
If you’re still having this issue, feel free to shoot me an email with the URL at https://danielsantoro.com/contact/ – I’d be happy to update the code, I just need to hunt down what’s going on first. 🙂