How to: Make Divi Footer Sticky or Fixed

by | Tips & Tricks

Below is an extract from our ‘Tips & Tricks‘ page.

The default behaviour of a footer in Divi is that it is at the bottom of the page and doesn’t show until you scroll to the bottom. However, if you have a very short page (less than the screen height) the footer will show immediately below the content which could be half way up the page. To get around this, you can make the footer  ‘sticky’ on individual pages which will apply the footer to the very bottom of the page even if the content only fills half the page

Sticky Footer – Individual Pages

Select the page in Divi builder that you want to apply the sticky footer to. Click the page settings hamburger icon

How to: Make Divi Footer Sticky or Fixed

Into the ‘Custom CSS’ field, paste the code below

That it, you now have a sticky footer on the page you apply this CSS to

Fixed Footer – All Pages

A fixed footer always displays regardless of how far down the page you are viewing. If you wish to have a Fixed Footer throughout the site on all pages, apply the CSS below to you child theme style.css file

Notes:
1. The fixed footer may cover existing content at the bottom of some pages. To get around this, increase the padding-bottom of the last (bottom) section within Divi builder by at least the same height as your footer.
2. You can avoid the fixed header showing on mobile/tablet which takes up a load of the screen height by using a media query:

@media (min-width: 981px) {

/* Your CSS */
}

Signup for the iConnik quarterly newsletter

Thanks. You have successfully signed up

Share This