[Resolved] Help With Sticky Footer

[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.

[Ying]

Hi Michelle,

The login doesn’t work, can you check?

Which tutorial did you follow?

And what is the CSS you added?

[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 */

[Fernando]

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. 🙂

[Michelle]

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

[Fernando]

You’re welcome Michelle! Glad that worked! 🙂

[Author]

Posts