[Support request] How do I create a sticky mobile bottom bar?

[Mark]

Similar to app styled bottom bars like you can see on mobile here: https://monstermortgage.ca/

There’s 2 buttons that are sticky to the bottom on mobile. I’d like to recreate this in generate press but am unsure how to.

Any ideas?

[Ying]

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!

[Mark]

Ok I’ve done that!

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

[David]

Hi there,

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

[Mark]

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

[Fernando]

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

[Mark]

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.

[Ying]

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

[Mark]

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

However it does not seem to be sticky on mobile?

[Ying]

The class is sticky-buttons, it seems you’ve added sticky-buttons class to the block, missed the s 🙂

[Author]

Posts