Sticky Footer for Montezuma (multiple solutions)

flyboy · #1 Sep 15, 2015, 05:50 PM

For those who are looking for a sticky footer for Montezuma, there are several solutions you can implement, depending on what you mean by sticky and whether you want a CSS-only solution or not.

All solutions listed below will carry over to any new theme upgrades if and when they get released

On-fold sticky footer, CSS-only solution

I myself was looking for a quick solution when I came across Rosetrees' solution. It's a nice solution for short pages, but the problem on long pages is that the footer is fixed to the bottom of the screen, and the content scrolls behind it.

If this is your cup of tea, it does offer a nice effect, and it just might be what you are looking for. For the sake of completeness of the thread, here is Rosetrees' code (thanks go out to Rosetrees for posting the solution):

Code:

#footer-bg {position: fixed; left: 0px; bottom: 0px; width: 100%;}

Bottom-of-content sticky footer, CSS-only solution (kinda, sorta...)

I tried several CSS-only solutions to make the footer stick to the bottom of the content, where most peeps want it. My criteria was that the footer must:

Grow dynamically with its content, without specifying height in the CSS
Allow full-width styling
Allow column-based footer styling independently of full-width
Maintain responsive design
Avoid specifying any pixel or percentage-based negative margins for #content, #main and similar divs
Use nothing but pure, hack-free CSS

In short - a truly responsive, math-free layout.

I came across this solution that worked really well, except for one thing - if the site owner decided to put in a big image in the content area, the img {max-width: 100%} rule would be ignored on mobile phones.

Meaning, once the content div snaps to 100% width, the column would take up the full width of the said large image, and, if the image is lager than its parent div, the horizontal scrollbar would appear.

Yes, I do debug to that level of detail.

Images will still scale just fine in desktop and tablet viewports, but the 100% width viewport will be hooped.

So if you deem that using CSS-only solution is more important than support for large images on mobile phones, here is the code, adapted for Montezuma's selectors:

Code:

/* Sticky footer */
#footer-bg {display: table-row; height: 1px;}
html, body {margin: 0; padding: 0; display: table; height: 100%; width: 100%;}

You can still use #footer-bg and #footer selectors to style your footer container and the footer itself independently.

With one caveat - do not apply vertical borders to your footer. If you did, the width of the vertical borders will be added to the 100% width, which will introduce the horizontal scrollbar (not a big deal for users, as the scrollbar will only scroll a few pixels, but you could still fail the mobile-friendly test by Google, and lose your ranking on mobile devices as a result).

The Ultimate Solution

This solution, unlike the one above, has no mobile issues. It fulfills all of the criteria too, except it uses JavaScript. That being said, it will not get overwritten by any potential theme updates:

Place this into the Montezuma Options > Head > Insert Code > Top window:

Code:

<!-- Begin Sticky footer JS -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(document).ready(function(){
    var contentheight = $("#main").height();
    var bannerheight = $("#banner-bg").height();
 var footerheight = $("#footer-bg").height();
    var breadheight = $("#breadcrumbs1-bg").height();
    $('#main').css('min-height', contentheight-bannerheight-footerheight-breadheight);
});
}); 
</script>
<!-- End sticky footer JS -->

Then add this to your CSS:

Code:

/* Working with JS to create sticky footer */
html, body{height: 100%; margin: 0; padding: 0;}
#main {min-height: 100%;}
#footer.lw:after {content: "";}

And if you experience the issue of footer "hovering" slightly above the bottom of the screen (mostly applicable just to those of us who stripped away most of the native Montezuma CSS), the culprit is the footer paragraph margin, which you can get rid of by adding this to your CSS:

Code:

#footer p {margin: 0;}

Or this, if you wish to preserve the paragraph top margin:

Code:

#footer p {margin-bottom: 0;}

Big thanks to our programmer Ben for the JS code