Home Forums Weaver X Tutorials and Hints How to create sticky footer

This topic contains 3 replies, has 2 voices, and was last updated by  scrambler 2 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #19200

    davidm
    Participant

    Hi,
    I’m using Weaver Xtreme without Plus (at the moment) and was trying to get the footer to stick to the bottom of the screen, this solution  – adjusted according to the Weaver documentation – worked for me and I thought it might help others.

    I installed Jetpack, activated “Edit CSS” and inserted the following css:

    html, body { padding: 0;  margin: 0;  height: 100%;}

    #wrapper { position: relative;  min-height: 100%;}

    #colophon { position: absolute;  bottom: 0;  left: 0;  right: 0;}

    * Not sure which section contentclass class refers to, I commented it out, can be it’s connected to the height of the footer.
    .contentclass {
        padding-bottom: 160px;
    }

    */

    #29098

    scrambler
    Moderator

    If you have Plus, there is a built in fixed bottom insertion area you can use for that.

    To fix the current footer without it, you can use different method. but if using the absolute positioning, all you should need is
    #colophon {position:absolute;bottom:0;left:0;}

    That places the footer above everything else at the bottom of the wrapper. But that means it will cover the bottom of the container, hiding that part from view.

    So you need to also add the rule below using a value as high as the footer to create a space at the bottom of the container
    #container {padding-bottom:100px;}

    #29099

    davidm
    Participant

    Hi Scrambler, Are you saying I just need:

    #colophon {position:absolute;bottom:0;left:0;} and

    #container {padding-bottom:100px;}

    ’cause that didn’t work for me – the footer appeared in the middle of the page

    #29100

    scrambler
    Moderator

    We need a link to your page with the CSS in to see your exact configuration and what is going on

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.