Quick Tip: How To Create A ‘Sticky’ Footer in Divi

Quick Tip: How To Create A ‘Sticky’ Footer in Divi

“Content is king” as the saying goes, but sometimes we just don’t have the need to fill up an entire web page full of it. There are many times that we just want to create a page with a paragraph or so of text a small image gallery, or a couple of FAQ’s. This is fine and there is absolutely no problem with it, except your page in Divi can end up looking a little funky and not as professional as you’d like.

The issue is, that without enough content on a page, the bottom of your site will not extend the full height of the computer monitor and will look out of place compared to your other pages.

Take a look at the screenshot below for an example of this and note all the white space below the footer:

Now it’s time for the simple solution

Okay so now what I am going to do is provide you with some handy-dandy code to place in your website. After you add this code to the proper section, your footer will extend the full height of the monitor, regardless of how much content you have.

From your dashboard, please navigate to Divi >> Theme Options >> Integration and insert this code in the section marked: “ADD CODE TO THE < BODY > (GOOD FOR TRACKING CODES SUCH AS GOOGLE ANALYTICS)” and Then press ‘SAVE CHANGES’.

Here is the code:

<script>// <![CDATA[
var th = jQuery('#top-header').height(); var hh = jQuery('#main-header').height(); var fh = jQuery('#main-footer').height(); var wh = jQuery(window).height(); var ch = wh - (th + hh + fh); jQuery('#main-content').css('min-height', ch);
// ]]></script>

Take another look now that the code has been added and see how the footer is now stuck to the bottom of the page. Much better!

Check out the video below for a step by step tutorial of how to achieve the Sticky Footer

Cory Jenkins

I am a an Avid WordPress User/Developer/Blogger and Co-Founder of Aspen Grove Studios. When I am not designing awesome stuff, I enjoy hanging out with my family, watching baseball and exploring the great outdoors.