pixel

The other day I shared with you a tutorial on using columns within the tabs module for Divi.  The same client had several pages where there just wasn’t enough content to push the footer to the bottom of the screen and it was driving him crazy.

We had a few options to get the Divi footer to “stick” to the bottom of the screen:

  • Live with it (not an option in my case).
  • Use a divider module that has enough pixels to push the footer down the page (this is fine if you only have a page or two that need fixing, but if you have many, it can become time consuming and I am not sure this will look okay on mobile).
  • Add padding to the bottom of your section (if you do this method I strongly suggest that you work in the visual builder, otherwise you are back and forth estimating the padding).

What I did (thanks to Mahesh who gave me the jQuery code):

  • I added a little bit of code which would solve the problem site wide.
  • To do this:
    • go to your WordPress Dashboard
    • select Divi Theme Options
    • navigate to Integration
    • in the section that says Add Code to Body, paste this:
    • <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>integrations tab in divi

Look for Add code to the <body>

code to push the footer to the bottom of the screen in divi

Serendipitously, I was reading through the Facebook EMP group and there was a thread on this very topic.

The Divi theme heavy hitters Michelle Nunan and Sean Barton were weighing in along with Stella McGovern of BrooklynDesign.Studio.  Stella caught my attention because she was testing everyone’s suggestions and supplying screen shots to show the outcomes.  I reached out to Stella to ask her if I could share her research as part of this post and she graciously agreed.

Option curated by Patrick Finney – post this CSS in your child theme or in the Divi Theme Options CSS area.

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

Stella’s results

sticky footer using css | Suggested by Patrick Finney

sticky footer using css | Suggested by Patrick Finney

sticky footer using css on mobile | Suggested by Patrick Finney

sticky footer using css on mobile | Suggested by Patrick Finney

This solution has lots of promise, but as Stella’s testing uncovered content is getting cut off and some people may not like the fact that the Powered by & WordPress are on two different lines.

Michelle Nunan wrote this little bit of CSS which would also be placed in the CSS area of your site.  Note the number 103 would need to be adjusted based on the height of the footer on your website.

  • #main-content {
    min-height: calc(100vh – 103px) !important;

Sidebar, I say “little” but for the non CSS writers out there this could be tantamount to producing the great American novel, props always to Michelle!

sticky footer using css - Michelle - mobile

sticky footer using css – Michelle – mobile

We aren’t bothering with the desktop screen shot because it’s perfection.  What you (or your client) may not love on this option is that the designed by line is outside of the colored footer box.

Then there is the code that I used (thank you Mahesh!) which Stella also tested.

sticky footer using jquery

sticky footer using jquery

sticky footer using jquery - mobile

sticky footer using jquery – mobile

Holla holla win a dollar, jQuery seems to be the best solution.  Thank you Stella for doing the heavy lifting and thank you Patrick, Michelle & Sean for weighing in.

Lesson here really is that there are many ways to accomplish goals with Divi.  If something doesn’t work, don’t panic, there will be a solution.

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This