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 Ying,

Not sure what you mean by "Follow us" widget, but what I want is a bar that is sticky to the bottom and in the middle of the bar there's an icon that links to a page. Just like the mobile menu but without the menu and on the bottom instead of above.

Thanks!

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;
    }
}

Hi there,

Thanks! Most of the things work, the only thing I am struggling with right now is the class deosn't seem to be working, both hide-on-desktop and sticky-footer, I added the class but it doesn't do the trick. Could you help me out here?

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.

Works now, thanks!

Glad to be of help!