Add a sticky footer area to our Joomla templates with this simple CSS

Last Updated:

June 3rd, 2015

Category:

Customization Tips

If you asked us how to create a footer that sticks to the bottom of the page in a Joomla template or WordPress theme we would say to you: “It’s pretty simple“.

Our objective is simple: Make the footer of our web page stay at the bottom even if the page’s content area is shorter than the user’s browser window. Probably you need this solution because in the footer section you have copyrights, footer links and sometimes bottom navigation.

On the web you can find a few different techniques to do this job, which is the best? – It’s hard to say.

1. First step, find & define which element of the layout must be sticky – for this you can use the Firebug tool.
2. For example, in GK Creativity:

   #gkFooter {
   bottom: 0;
   position: fixed;
   width: 100%;
   }

   Additionally to reduce footer height you can use this css code:

   #gkFooter, 
   #gkFooterNav li {line-height:50px;}

Unfortunately, a sticky footer is not really suited for responsive web design layouts if somebody will use a smartphone to browse website, because it covers a large part of the available mobile screen. For RWD, that just doesn’t work, as the footer needs to be able to change size along with the screen.

This article was first published October 11th, 2013