How to Make Your Divi Footer Sticky

In this tutorial, we’ll show you exactly how to make the footer on your Divi website sticky. Using a sticky footer may be one of the requests you get when you’re designing a website for a client or a need you have when you’re creating a website of your own. We’ll show you two possibilities that will make your footer sticky. The first way is through CSS code and the second one through jQuery code. Both ways work but it all depends on which one you prefer using to create that sticky effect for your website.

Adding a sticky footer to your website is currently not something you can automatically do within the Divi builder. That’s why we’re going to show you how to reach the exact result you want without having to put in a lot of effort. The only thing you have to do is follow this post step by step, copy and paste some lines of code and put them in the right place.

Why Use a Sticky Footer?

A sticky footer is usually used for one main reason; if you have one page or multiple pages on your website that don’t have enough content available to fill a whole screen. You could, of course, make sure you have enough content on a page but if it doesn’t bring added value to the page; there’s no need to do it.

Now, in case there’s not enough content to fill the whole screen, the page will have a floating footer right after the content ends. That usually doesn’t look good and it’s not the result you want the get. Luckily, you can make use of a sticky footer to get rid of the floating footer. The sticky footer makes sure the footer stays on the bottom of the page without creating unnecessary space. The length of the page will thus remain the same and everytime you adjust the size of your window, the footer will modify itself to the screen.

Here you have an image of a short page that doesn’t have a sticky footer:

And here’s the same image of that page after a sticky footer has been added:

Difference Between Sticky And Fixed Footer

Not everyone decides to use a footer on their website but when they do; there are plenty of ways to style it. It all depends on how the structure of your website is and if you want to include a ‘manual’ and differently styled footer that’s made with the Divi builder instead.

But if you are using a standard footer, you can choose how you like to style it and how you want it to be positioned on your website. The three main positions a footer can have on a website are the floating, fixed and sticky.

When comparing the sticky and the fixed footer to one another; they might look the same at first sight but they aren’t. The fixed footer is always visible when scrolling through a page on your website whereas the sticky footer specifically handles pages where the content is not long enough to reach the bottom of the screen. In that specific case where the content isn’t long enough; it’ll behave like a fixed footer and stay stuck to the bottom of your page; creating that ‘fixed footer effect’.

However, if the content is long enough, the sticky footer will behave as usual and the page will push the footer down to the bottom of the page to make sure it doesn’t continuously appear on the screen. In most cases, this method is rather preferred than having a fixed footer throughout the whole website because it gives more room on the window for the content to appear.

Create a Sticky Footer on Your Divi Website Through CSS

Without any further due, let’s start creating a sticky footer for your website. The code we’ll be using is really simple but gets the job done. You’ll quickly move on from a floating footer on your page to a page where the footer gets pushed down below if the content is not long enough.

Add CSS Code Through Page Settings (For One Page in Particular)

In certain cases, you want to make the footer sticky on one particular page only. In this part of the post, we’re going to show you how to do that exactly by adding the CSS code to the Custom CSS field of one page. By doing that, you make sure that the CSS code only applies to that one page on your website. Which also means that the CSS code will only be loaded when someone opens that particular page. This method usually is used in cases where there are only a few shorter pages on the website that you want to give the sticky footer to.

Start by opening the page you want the sticky footer to be active or by creating a new page where you want it to apply. Next, open the page settings by clicking on the following icon in your Divi builder:

Moving on, add the following code to the Custom CSS field in the window that you just opened:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

From the moment you preview your page, the CSS code should apply and make the footer sticky.

Add CSS Code Through Theme Customizer (Real-Time View)

Another way of adding the code is through the Theme Customizer. If you’re adding the CSS code through this way, it’ll automatically apply to the whole website. Every page will have this CSS code applied to it. By adding the code through the Theme Customizer, you can also directly see the changes happen to your website.

To add the CSS code to the Theme Customizer, click on the ‘Theme Customizer’ in the back end of your WordPress website. Next, scroll down the page and open the Additional CSS option. You’ll see all the custom CSS code you’ve used so far appear. Go ahead and add the following code to it:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Add CSS Code Through Divi Theme Options

Last but not least, you can also add the code through the Divi Theme Options. This is the most frequently used way of adding code to a website where you want the whole website to benefit from the code.

Go to Divi > Theme Options > Scroll down the page > Add the following CSS code to the Custom CSS box:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Create a Sticky Footer on Your Divi Website Through JQuery

Add jQuery Code Through Code Module (For One Page in Particular)

You can add the jQuery code by using the Code Module within the Divi builder. This, again, is mostly used when there are not a lot of pages with short content and if you don’t want to load the jQuery code for the whole website.

Add a section with a fullwidth row to the page you’re working on.

Continue by adding a code module to that fullwidth row and paste the following code into it:

Add jQuery Code Through Divi Theme Options

Another possibility to add the jQuery code is through the Divi Theme Options. When adding jQuery code for the whole website, there is one specific place in the Divi Theme Options where we can do that; in the <head&gt; field of the Integration tab. That’s exactly where we’re going to add the code right now.

Open your WordPress Website > Go to Divi > Open the Theme Options > Go to the Integration tab and add the following jQuery code to the <head> of your website:

This sticky footer refreshes itself every time the size of the window gets changed so you don’t have to worry about having another floating footer when you’re changing the size of your screen in your browser.

Final Thoughts

Adding a sticky footer is usually necessary in cases where you have a page with not a lot of content in it. You want to get rid of the floating footer in order for the page structure to feel more natural. If you have any comments or suggestions for future posts on our blog section; make sure you leave a comment in the comment section below so we can get in touch!

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you're looking for someone to help you tell your company's story, she'll know how to handle it.

Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder

Check Out These Related Posts

Divi is a great choice for building websites for Churches. Divi has everything you need to display information about the Church, service times, the pastors, events, media, and lots more. Fortunately, you don’t have to build a Church website from scratch. There are several Divi child themes for...

Divi’s new WooCommerce Modules update has been long-awaited and now that it’s here, the possibilities to customize product pages have become endless. Today, we’ll show you how to use Divi’s built-in options and the new WooCommerce Modules to create a customized minimal...

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.
This week, as part of our ongoing Divi design initiative, we’re going to show you...

28 Comments

Petter Bye
July 2, 2017

Useful tip, if it had worked properly.
The footer gets sticky, but once you start to scroll it follows!
Not as expected…

Faycal Boutam
July 2, 2017

If you can scroll down then you really don’t need this. This tutorial for pages with small content where you can’t scroll. The CSS solution is meant to be used for a specific page, so if you want this to apply globally, you need to try out the Js solution of this post.

Thanks for this useful tutorial! I appreciate resources like these that explore a variety of scenarios where special CSS and code could be quite useful.

On another topic of making a page element sticky, a post would be appreciated that explores how to create a sticky navigation bar (or other elements like CTAs or other Divi modules) that becomes fixed to the top after scrolling. Here’s an example: https://stanhub.com/tutorials/sticky-navigation/.

I’ve Googled the topic and found different solutions, but if ET has suggestions of their own, they would be greatly valued!

Note that it only affects Desktops… because on most mobile phones, they treat the entire screen as the viewport (meaning, the footer would be pushed beyond the bottom… since it’s calculating the browser bar as part of the body height). But it works flawlessly on desktop). Try it!

Dennis
July 3, 2017

Thanks very much but I should have mentioned I wanted the manually horizontal fixed scrolling nav bar specifically for a mobile site!

I published a tutorial about this some weeks ago, but I also made a free plugin with this functionality for those who don´t want to mess with the code and would rather use a plugin. I wrote this same comment some days ago but my comment didn´t appear, I guess because of the link to my post and plugin, so if you want to check them out you can google: “Divi Quasi Sticky Footer”. Let´s hope this time my comment gets through.

I have tried the CSS method on three different sites and it messed up pages on all of them. I tired the Javascript method (site wide) and it created a javascript erroe that prevented other javascript from executing on the page.

Peter
August 10, 2017

There is a problem with the jQuery code in that on load $(window).height(); is not accurate as it needs time to load the document before it can give an accurate height and so you need to use a setTimeout on the first function call.

setTimeout(function() {
stickyFooter();
}, 100);

Peter
August 10, 2017

There is also a syntax error with the resize function, it should be as below which is why it might have caused errors elsewhere.