Elementor Force Footer To Bottom of Page No Matter What
Get Premium

Elementor Force Footer To Bottom of Page No Matter What

Element.How also offers premium tutorials! Check them here:

Elementor Force Footer To Bottom of Page No Matter What

Table of Contents

In this tutorial I'm going to show you how to have your Elementor footer be forced to the bottom. With this method, the footer will be pushed all the way down, no matter how little content there is.

Here is what we want to avoid:

Here is with the fix:

Let's get started!

Please be aware that this might not work for every theme out there. This is tested working for Elementor Hello theme, using the Theme Builder from Elementor Pro.

If you are using something else, ask me in the comments, with a link to your page that has little content.

First, copy paste this Elementor push footer to bottom code

You will probably want to add this somewhere global. So it could be in your theme's child styles.css, in the Customizer > Additional CSS, or in Elementor settings > Global CSS.

This should work if you created your footer with the Elementor theme builder from Elementor Pro.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Force Footer To Bottom of Page No Matter What tutorial 
 * Found at this URL https://element.how/elementor-force-footer-to-bottom/ 
 */ 
</script>

If the above isn't working, you may try this:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Force Footer To Bottom of Page No Matter What tutorial 
 * Found at this URL https://element.how/elementor-force-footer-to-bottom/ 
 */ 
</script>

If neither are working, use this one.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Force Footer To Bottom of Page No Matter What tutorial 
 * Found at this URL https://element.how/elementor-force-footer-to-bottom/ 
 */ 
</script>

It might be that none of the above work, and that's because the HTML markup changes from theme to theme. Ask me in the comments with a link to your page, I will try to help!

Then, enjoy your new Elementor footer that stays at the bottom!

Yep, it's that simple with the proper code.

Cheers!

Elementor Force Footer To Bottom of Page No Matter What

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

11 Responses

  1. HI there!
    I'm trying your sticky footer snippet but can't seem to make any of the three options above work. Can you take a look and let me know what's going on? On most of the pages there is enough content for the rudimentary Elementor sticky footer to work at the bottom, and when there's not, as a workaround, I've set a section height to 'fit window'. The site is privacy protected right now. If you email me I'll send you the logins, as I don't know if this comment is private.

    Here's a link to a page that has short content and no 'fit window' workaround - https://foliochristopher.mysites.io/sticky-footer/

    Thank you,
    Michele

    1. To readers: Michele reached out to me with the password so that I could see her page, and I realised she is using the Page Builder Framework theme.

      With that theme, the CSS required to push the footer at the bottom is:

      #content {
min-height: calc(100vh - 214px);
}

      and the 214px corresponds to the approximate height of the footer + header.

      Sharing here in case it helps someone!

  2. Why the Elementor team doesn't make this a standard for their footers is beyond me. Thanks - the first snippet worked for me, just changed my class name to footer.
    I'll be utilizing this site more often

  4. This does not work for me. Tried all the codes. The footer is fixed at the bottom but still rides up the screen as page is scrolled.

    1. My mistake. It was a plugin I added called WP Mobile Bottom Menu which added 300 pixel but should have only worked in mobile.

      All good.

    1. Greetings,

      With Astra you need this:

      .site-content {
      min-height: calc(100vh - 200px); /* 200px here is the approximate height of your header + footer */
      background-color: #fff; /* set your background color here */
      }

      Cheers!

    2. You will probably want to add this somewhere global. So it could be in your theme's child styles.css, in the Customizer > Additional CSS, or in Elementor settings > Global CSS.

Leave a Reply