[Support request] Add a fixed button at the bottom of screen on mobile

[Ben]

Hi Guys,

How would I add a sticky or fixed button on the bottom of the screen on mobile view?

I’ve added an image of what I’m trying to achieve:

Is this possible?

Thanks

[David]

Hi there,

Try this:

1. Create a new Block Element:

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

2. Add a GB Container Block, with an Advanced > Additional CSS Class(es) of: hide-on-desktop hide-on-tablet sticky-mobile-footer

3. Add your styles and button to the Container Block.

4. Set the Block Element Hook to after_footer

5. With the block published, then add this CSS to your site:

.sticky-mobile-footer {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 100000;
}

[Ben]

Hi David,

Thanks for this.

Unfortunately, that hasn’t worked 🙁

I’m not sure if I’ve done something wrong or not?

Thanks

[David]

I can’t see the sticky-mobile-footer Element on that page?

[Ben]

This is how I’ve got it set up:

I’ve got the CSS in place and it’s set to after-footer

So what am I doing wrong?

[Ying]

Hi there,

You have the hide-on-mobile class added to the container, I thought you want it to appear on mobile right?

[Ben]

OMG I’m so dumb!

Thanks, it works now.

Just a quick one though to tidy up.

The bar is hiding under certain elements on the page (see image below):

How do I bring it to the front?

Thanks

[David]

I edited the CSS here:

https://generatepress.com/forums/topic/add-a-fixed-button-at-the-bottom-of-screen-on-mobile/#post-2017429

now has the z-index property which should keep it in front

[Author]

Posts