[Resolved] fix footer on the bottom

Hi Ken,

Just to make sure that you want the “Follow us” widget to be sticky to the bottom on mobile?
Let me know 🙂

Hi there,

you can create a new Block Element:

https://docs.generatepress.com/article/block-element-overview/

1. Use GenerateBlocks Container Block to create the Bar, and add what other buttons etc you need to it.

2. Select the Container Block and in settings > Advanced > Additional CSS Class(es) add 2 clases: sticky-footer hide-on-desktop

3. Then in the Element settings leave the Block Type as Hook
4. In the Hook field select generate_after_footer
5. Set the Display Rules to Entire Site or wherever you want it displayed.

Once thats done you should see your custom footer bar on the page.
Now we need to add some CSS:

@media(max-width: 768px) {
    body {
        margin-bottom: 80px; /* adjust this to the height of the custom footer */
    }
    .sticky-footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

Oops couple of things:

1. I made a typo in the CSS above – updated here
2. You need to select the Container Block and add the sticky-footer hide-on-desktop classes, currently you have them applied to the Image Block.

Glad to be of help!