[Resolved] Sticky buttons at bottom of mobile page

[jorge]

I found this thread but the screencasts are missing, any way to reupload them? i think i can figure it out, just needed to see how to configure these

https://generatepress.com/forums/topic/footer-sticky-bar/

What i would like is to have a call us button as well as a text us button incorporated into the bottom bar, not floating icons just something unobtrusive. I don’t mind hiding the copywright bar on mobile. I’d just want this bar to show up on mobile, not desktop. Thank you!

[jorge]

sorry, forgot url

[Ying]

Hi Jorge,

You can create a block element, add the 2 buttons into it.

Set the block element type to hook, use after_footer as the hook name, choose location according to your needs.

To hide the buttons on desktop, you can add hide-on-desktop class to the buttons:
https://wordpress.com/support/adding-additional-css-classes-to-blocks/

[jorge]

Got it to work but buttons are one on top of the other rather than side by side

[Ying]

Try add this CSS:

.site-footer + .wp-block-buttons {
    display: flex;
}
.site-footer + .wp-block-buttons > * {
    flex: 1;
}

[jorge]

That worked great, thank you. One last thing the buttons aren’t sticky as always being on the bottom of the mobile window. Also how do i hide the footer on mobile?

[jorge]

I figured out hiding the footer/copywright bar on mobile, just need help with the floating buttons on scroll, meaning i would like those two buttons to be always visible at the bottom. Thanks again!

[Fernando]

Hi Jorge,

You can modify Ying’s code to something like this to make the buttons fixed at the bottom.

.site-footer + .wp-block-buttons {
    display: flex;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
}
.site-footer + .wp-block-buttons > * {
    flex: 1;
}

If you wish to have it sticky on mobile only, you may use this instead:

@media (max-width: 768px) {
    .site-footer + .wp-block-buttons {
    display: flex;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    }
    .site-footer + .wp-block-buttons > * {
        flex: 1;
    }
}

Kindly let us know how it goes! 🙂

[jorge]

I actually would like buttons hidden on desktop , Tried the sticky on mobile code but the buttons are not centered, and the request quote lettering is stacked.

[Fernando]

I actually would like buttons hidden on desktop

I can see that you’ve currently set it not to display on both desktop and tablet. Alternatively, here is a code for that as well:

@media (min-width: 769px) {
	.site-footer + .wp-block-buttons {
		display: none;
	}
}

Tried the sticky on mobile code but the buttons are not centered, and the request quote lettering is stacked.

Can you try this code instead?

@media (max-width: 768px) {
    .site-footer + .wp-block-buttons {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 9999;
    }
    .site-footer + .wp-block-buttons > * {
        flex: 1;
    }
}

Hope this helps! Kindly let us know how it goes. 🙂

[jorge]

did not work, visit my site so you see what i mean.

[Fernando]

Sorry about that. I mistakenly copied the previous code instead of the new code I tested.

Here it is:

@media (max-width: 768px) {
        .site-footer + .wp-block-buttons {
        display: flex;
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%,0);
        z-index: 9999;
        width: 90%;
        }
    }

This is what it looks like from my end: https://share.getcloudapp.com/L1uW08qL

Kindly let me know how it goes. 🙂

[jorge]

Looks like that worked, thank you!.

[jorge]

I will close this topic, thanks again!

[Fernando]

You’re welcome Jorge! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

[Author]

Posts