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!

Tags: , , , , ,

6 Responses to “WooThemes Canvas Theme – Adding a Sticky Footer”

  1. Adam May 21, 2015 at 18:50 EDT (6:50 PM) #

    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?

    • Danny Santoro May 21, 2015 at 19:31 EDT (7:31 PM) #

      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 -322px numbers 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!

  2. Daniel Richardson September 22, 2015 at 08:08 EDT (8:08 AM) #

    Hi Danny,

    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.

    • Danny Santoro November 3, 2015 at 13:24 EST (1:24 PM) #

      Hi Daniel!

      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/

  3. Shannon Storms October 26, 2015 at 18:45 EDT (6:45 PM) #

    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?

    • Danny Santoro November 3, 2015 at 13:28 EST (1:28 PM) #

      Hi Shannon!

      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. 🙂

Leave a Reply to Daniel Richardson Cancel reply

%d bloggers like this: