WordPress.org

Forums

JBST
[resolved] Sticky footer (4 posts)

  1. munger41
    Member
    Posted 1 year ago #

    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

  2. munger41
    Member
    Posted 1 year ago #

    This seems to be a better way to do it with your theme : http://mystrd.at/modern-clean-css-sticky-footer/

    sorry for disturbing

  3. bassjobsen
    Member
    Theme Author

    Posted 1 year ago #

    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.

  4. bassjobsen
    Member
    Theme Author

    Posted 11 months ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.