1

I'm using the jekyll-bootstrap hooligan theme but I've got many problems to stick the footer in jekyll-bootstrap.

Are there any way to stick the footer in this theme?

http://themes.jekyllbootstrap.com/preview/hooligan/

SheetJS
  • 22,470
  • 12
  • 65
  • 75
user2850891
  • 11
  • 3

1 Answers1

4

To use the sticky footer you'll need to modify the default theme template and add some css.

_include/theme/THEMENAME/default.html: 

...
<body>
  <div class="wrap">
    <!-- navbar and content here! -->
    <div class="footer-push"></div>
  </div>

  <footer>
    <div class="container">
      <!-- footer here! -->
    </div>
  </footer>
</body>
...

Sass code: 

/* Sticky footer */
$footerHeight: 75px;

//Page full height
html, body {
    height: 100%;
}

#page-wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    // Negative indent footer by it's height
    margin-bottom: -($footerHeight);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

//footer fixed height
.footer-push,
footer {
    height: $footerHeight;
    max-height: $footerHeight;
    overflow: hidden;
}

Hooligan theme with sticky footer

I've used this theme with a sticky footer.

Hooligan theme screenshot

You can install it running in your terminal:

rake theme:install git="https://github.com/Miguelos/hooligan.git"

Bootstrap sticky footer

Here you have the example of a sticky footer for twitter bootstrap.

Miguelos
  • 304
  • 1
  • 4
  • 17