Stick Elementor footer to bottom

Hey Jacques,
Looks like your site is in maintenance mode. Are you able to temporarily disable this so I can take a look?
Thanks!

Hannah

Hello Hannah,

The site is back online for now but as mentioned in the previous message, it’s still running with Astra theme until I can figure out how to get that Elementor “sticky footer” function to work with Kadence.

Thanks,

Jacques.

Hey,
You can use the same type of code:

add_action( 'wp_footer', 'astra_footer_align_bottom' );
function astra_footer_align_bottom () {
	?>
	<script type="text/javascript">
		document.addEventListener(
			"DOMContentLoaded",
			function() {
				fullHeight();
			},
			false
			);
		function fullHeight() {
			var headerHeight = document.querySelector("#masthead").clientHeight;
			var footerHeight = document.querySelector("#colophon").clientHeight;
			var headerFooter = headerHeight + footerHeight;
			var content = document.querySelector('#inner-wrap');
			content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
		}
	</script>
	<?php
}

Ben

Thank you Ben! I added your code but it still doesn’t work.

Cheers,

Jacques

Sorry to hear that, I tested that code before I sent it. You are using the Kadence Theme right?

Could be something else affecting things. Try adding a later priority perhaps that will make a difference.

add_action( 'wp_footer', 'astra_footer_align_bottom', 60 );

Else can you send a link?

Ben

Thank you Ben!
Yes I’m using Kadence Theme.
Maybe I did something wrong. Where would I have to add that “later priority”? Thank you.

View post on imgur.com

The link to the page:

https://www.tkio.net/2d-assets/

Cheers,

Jacques.

Looks like you are using elementor for your footer. Here is the update you can try:

add_action( 'wp_footer', 'astra_footer_align_bottom', 60 );
function astra_footer_align_bottom () {
	?>
	<script type="text/javascript">
		document.addEventListener(
			"DOMContentLoaded",
			function() {
				fullHeight();
			},
			false
			);
		function fullHeight() {
			var headerHeight = document.querySelector("#masthead").clientHeight;
			var footerHeight = document.querySelector(".elementor-location-footer").clientHeight;
			var headerFooter = headerHeight + footerHeight;
			var content = document.querySelector('#inner-wrap');
			content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
		}
	</script>
	<?php
}

It almost works… I still get a little gap at the bottom?

View post on imgur.com

Thank you Ben!

Cheers,

Jacques.

When I look at your site it seems the cookie bar is filling that spacing, which means it’s likely creating it even if you have accepted.

Ben

Thank you again Ben!
I can live with it for now but it’s just that I wouldn’t get that issue with the Astra Theme.

Cheers,

Jacques.

You can customize the code more to account for the cookie bar:

add_action( 'wp_footer', 'astra_footer_align_bottom', 60 );
function astra_footer_align_bottom () {
	?>
	<script type="text/javascript">
		document.addEventListener(
			"DOMContentLoaded",
			function() {
				fullHeight();
			},
			false
			);
		function fullHeight() {
			var headerHeight = document.querySelector("#masthead").clientHeight;
			var footerHeight = document.querySelector(".elementor-location-footer").clientHeight;
			var headerFooter = headerHeight + footerHeight - 74;
			var content = document.querySelector('#inner-wrap');
			content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
		}
	</script>
	<?php
}

Ben

Great. Thank you Ben!

Cheers,

Jacques.