Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

Sticky Footer for Montezuma (multiple solutions)

Old Sep 15, 2015, 04:50 PM
flyboy's Avatar
115 posts · Sep 2010
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):

#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:

/* 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:
<!-- 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">
    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);
<!-- End sticky footer JS -->
Then add this to your CSS:
/* 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:
#footer p {margin: 0;}
Or this, if you wish to preserve the paragraph top margin:
#footer p {margin-bottom: 0;}
Big thanks to our programmer Ben for the JS code

Last edited by flyboy; Sep 17, 2015 at 11:56 AM.


sticky footer

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Sticky Footer in IE8 not working jodybethw Post-Kicker, -Byline & -Footer 2 Mar 28, 2012 12:59 PM
Sticky spanning over multiple columns tkeller Header configuration & styling 3 Aug 2, 2009 05:23 PM
Sticky Footer krystyna Post-Kicker, -Byline & -Footer 1 Jul 12, 2009 05:21 AM

All times are GMT -6. The time now is 06:10 PM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.