How do I create a sticky mobile bottom bar?

Hi Mark,

1. Go to appearance > elements, and create a new block element.

2. Add the 2 buttons you want to the block element, and add hide-on-desktop hide-on-tablet class to the button block:
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

3. Set the block element type to hook, and select after_footerhook.

4. Set the block element location depending on your needs.

Once that's done, we can have another look and provide custom CSS for that.

Let me know!

Ok I've done that!

What's the custom CSS that I need to add?

Hi there,

can you share the link to your site where we can see what you added ?

https://alexlavender.flywheelstaging.com/

Note that I actually do not see the block on mobile... but I do see it on desktop. (even though I added the "hide on desktop" and "hide on tablet" settings turned on).

Hi Mark,

So we can take a closer look at your setup, can you provide admin login credentials?

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Thanks for the help! I've sent private info.

Appearance > Elements > Mobile Sticky Bottom Bar

that's the element I'm trying to get as a mobile only bottom app style bar like the Monster Mortgages website.

Hi Mark,

Your settings are all correct.

Try adding a CSS class to the buttons block, eg. sticky-buttons, then add this CSS:

.site-footer + .gb-button-wrapper.sticky-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

Added! It now is hidden on desktop & tablet, and appears on mobile.

However it does not seem to be sticky on mobile?

The class is sticky-buttons, it seems you've added sticky-buttons class to the block, missed the s :)