Docs

[pdeluca]

Hi, Im trying to achieve this kind of behavior with the footer:

1) The footer should be visible if the content above it is shorter than the user’s viewport height.
2) If the content is taller than the user’s viewport height, then the footer should disappear from view and rest at the bottom of the page, as it would naturally.

Any ideas how to make this happen? URL is http://81c.e86.myftpupload.com/homepage/

Thanks,
Pablo.

[pdeluca]

This is a sample where the content sometimes doesnt fill the screen so the footer should be at the bottom of it.

http://81c.e86.myftpupload.com/loch-arbor-project/

Pablo.

[Lely]

Hello Pablo,

Please try add the following code on Appearance > Customize > Custom > Edit Global Javascript:

jQuery(document).ready(function ($) {
    if ($("body").height() < $(window).height()) {
     $('.x-colophon.bottom').css({'position':'fixed', 'width':'100%'});
    }
});

Hope this helps.

[pdeluca]

Thanks Lely. I tried that piece of code but unfortunately it didnt work.

Pablo.

[Nico]

Hi There,

In this case, would you mind sharing us your admin credentials in private reply.

Don’t forget to set it as private reply.

Thanks.

[pdeluca]

This reply has been marked as private.

[Rad]

Hi there,

I tried it and credentials are not correct. Please provide the latest one.

Thanks!

[pdeluca]

This reply has been marked as private.

[Paul R]

Hi Pablo,

You can try this code instead.

jQuery( document ).ready(function($) {
$(window).on("resize", function () {    
    var adminbarHeight = $('#wpadminbar').height();
    
    var windowHeight   = $( window ).height();
    var mastheadHeight = $('.masthead').outerHeight();
    var landmarkHeight = $('.x-header-landmark').outerHeight();
    var footerHeight  = $('.x-colophon.top').outerHeight();
    var subHeight = mastheadHeight + footerHeight + landmarkHeight + adminbarHeight;
    var contentHeight  = windowHeight -  subHeight; 
    $('.x-main').css('min-height',contentHeight);
}).resize();
});

Hope that helps

[pdeluca]

Hi Paul, it seems that piece of code worked very well.

Thanks,
Pablo.

[Joao]

Glad to hear it 🙂

Joao

[Author]

Posts