Force footer to bottom

[cvdw]

Hi,

I can I force the footer to stay at the bottom when there is less content?

I have the proplem on an iPad in portrait.

This is not working for me:

Force Footer to bottom JS code no longer works

Hi I have been using this code: // Force Footer to Fixed at bottom if content is less jQuery(document).ready(function($) { var $main = $(’[role=“main”]’), $windowHeight = $(window).outerHeight(), $masthead = $(’.masthead’).outerHeight(), $wpbar = $(’#wpadminbar’).outerHeight(), $footer = $(’.x-colophon.bottom’).outerHeight() + $(’.x-colophon.top’).outerHeight(); $main.css(‘min-height’, $windowHeight - $masthead - $wpbar - $footer - 200); }); to force the footer down the page when the …

Or do I have to add some css also?

I’m using X theme, no Pro at https://vanderwyck.nl/wp/over-ons/

Regards, Carel

[tristup]

Hi Carel

Thanks for reaching out.
The given code in the reference thread is to force the footer at the bottom when the content is short. But that is not applicable in your case. If you are expecting the fixed footer, regretfully, there is no such option to make the footer fixed. My colleague has already made a feature request on this, so it might be taken into account in the future.

Thanks

[cvdw]

Hi, yes it is to force the footer at the bottom when the content is short. See printscreen of the ipad in portait mode attached.

Carel

[tristup]

Hi Carel,

In that case, you can use the modified code by adding it into the Theme Options > JS. I have tried the code using the browser debugger console and found it’s working.

jQuery(document).ready(function($) {

    var main = jQuery('.x-main');
    var masthead = $('.masthead').outerHeight();
    wpbar=-32;
    if(jQuery("#wpadminbar").length)
    {
        wpbar = ('#wpadminbar').outerHeight();
    }
    var footer = $('.x-colophon').outerHeight()
    totalHeight = masthead + wpbar + footer;
    $('.x-main').css('min-height', 'calc(100vh - ' + totalHeight + 'px)' );

});

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[cvdw]

Thanks, that did the job!

[tristup]

Hi Carel,

Glad that it works for you.

Thanks