Articles in this section

See more

Creating a Fixed (Sticky) Footer

  • Updated

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this hack.

With a little bit of CSS magic, you can easily convert any footer on your page into a sticky footer. This may be useful in cases where your footer is too high up on the page due to your page content not adding enough height.

You can view a live example of this hack in action here.sticky-footer.gif

Creating the setup

First, go to Customize > Footer and find the footer you want to be sticky. Select your footer's section, and in the section options assign a custom classname of 'fixed-footer'.

sticky-footer-adding-class.gif

Adding the CSS

Now that we have assigned the custom classname to our footer section, let's make it sticky! You can add the following CSS globally under Customize > Advanced > Custom CSS or on a page-by-page basis by adding it under the Branding tab's custom CSS area:

.fixed-footer {
   position: fixed !important;
   left: 0 !important;
   bottom: 0 !important;
}

@media only screen and (max-width: 768px) {
   .fixed-footer {
      position: relative !important;
   }
}

Note: the sticky effect will be removed for screen widths above 768px. You can remove this last line of code to have the footer sticky on all device widths, or adjust the pixel value as needed.

Related articles