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

Last Updated:
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:

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

Add a sticky footer area to our Joomla templates with this simple CSS 4.505 (90.00%) 2 votes

This article was first published

Villa Belluci - View our NEW theme

Tutorials & tips delivered regularly

Expand your purchase with regular tutorials and tips to making your site better, direct to your email.