[Resolved] Help With Sticky Footer

Home Forums Support [Resolved] Help With Sticky Footer

Home Forums Support Help With Sticky Footer

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2174078
    Michelle

    I have been following tutorials here to make my footer sticky. I created a Container Block with Elements, styled it, added CSS, and I see the footer, but it isn’t sticky.

    #2174092
    Ying
    Staff
    Customer Support

    Hi Michelle,

    The login doesn’t work, can you check?

    Which tutorial did you follow?

    And what is the CSS you added?

    #2174106
    Michelle

    I’ve been at this for days. I don’t know which tutorial I followed at this point because I tried many. Here is the code in my Customize>Additional CSS:

    /*Make Footer Sticky*/
    .site-footer + .wp-block-buttons {
    display: flex;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    }
    .site-footer + .wp-block-buttons > * {
    flex: 1;
    }
    /* End GeneratePress Site CSS */

    #2174115
    Fernando
    Customer Support

    Hi Michelle,

    Try adding my-footer-fixed to the Classes of your Container as such: https://share.getcloudapp.com/o0uRemxn

    Remove the margin bottom you set in the Container as well: https://share.getcloudapp.com/d5u9Apeq

    Now, add this CSS in Appearance > Customize > Additional CSS:

    .gb-container.my-footer-fixed {
        position:fixed;
        bottom:0;
        left:50%;
        transform:translateX(-50%);
        width:100%;
    }
    
    .site-footer{
        margin-bottom:54px;
    }

    Here it is working when I tested it: https://share.getcloudapp.com/6quZrPBZ

    Kindly let us know how it goes. 🙂

    #2174118
    Michelle

    I am so happy for this help! I implemented all of your suggestions, and the CSS. It now works for me.

    #2174122
    Fernando
    Customer Support

    You’re welcome Michelle! Glad that worked! 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.