WordPress.org

Support

Support » Themes and Templates » [Resolved] Sticky footer

[Resolved] Sticky footer

  • Hi,

    It’s me again, with another problem (well, this is not a bug on your theme), i try to make the footer sticky, as described here : http://css-tricks.com/snippets/css/sticky-footer/

    It kind of works, the footer gets sticky, but there is a problem somewhere with the sizes, because the footer becomes hidden in the bottom (we have to scroll a bit the browser towards the bottom in order to make the footer appear).

    If you have any idea, or if you already made it… thanks you very much !
    cheers

Viewing 3 replies - 1 through 3 (of 3 total)
  • This seems to be a better way to do it with your theme : http://mystrd.at/modern-clean-css-sticky-footer/

    sorry for disturbing

    Theme Author bassjobsen

    @bassjobsen

    Hi,

    Thanks for you interesting question!!
    I have not made it before.

    For me it seems the position:absolute give some troubles. the footer is not a direct sibling of the body. (wrapped in a ).

    On the default layout this works:

    html {
      position: relative;
      min-height: 100%;
    }
    body {
      /* Margin bottom by footer height */
      margin-bottom: 182px;
    }
    footer {
      position: fixed;
      bottom: 0;
      /* Set the fixed height of the footer here */
      height: 182px;
      width: 100%;
    }

    You will have to change 182 to the height of your footer. Now i wonder why your example uses absolute. http://caniuse.com/#search=fixed doesn’t show me a reason to not use fixed.

    Some notes. JBST is responsive by default which means the footer height is fixed in all cases.
    I you have set the grid-float-break-point (768px) by default consider to apply the above only for screen width >= grid-float-break-point. So for instance enter in the LESS Compiler:

    @media (min-width: @grid-float-breakpoint) {
    html {
      position: relative;
      min-height: 100%;
    }
    body {
      /* Margin bottom by footer height */
      margin-bottom: 182px;
    }
    footer {
      position: fixed;
      bottom: 0;
      /* Set the fixed height of the footer here */
      height: 182px;
      width:100%;
    }
    }

    In the case the height of your footer also varies above the grid-float-break-point you can use jQuery to set your CSS dynamically.

    Theme Author bassjobsen

    @bassjobsen

    Now i think a better solution can be found at https://plus.google.com/116797701827736533225/posts/DoK3fJKL7LM

    This solution extends Bootstrap’s .navbar-fixed-bottom class. You can enter the following code into the Less editor:

    @media (min-width: @grid-float-breakpoint) {
    footer#colophon { &:extend(.navbar-fixed-bottom);}
    }

    The preceding code has been wrapped in the @media (min-width: @grid-float-breakpoint) media query remove this wrapper for a sticky footer on mobile devices too. When using the default JBST footer with four columns the height of the footer will be taken to much space when fixed.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] Sticky footer’ is closed to new replies.