[Support request] Adding fixed mobile footer

[Richard]

Hi,

Really keen to improve the mobile version of my site.

So how do I add a fixed mobile footer with say an email button, call back request or click to call option for example?

This would be a fantastic feature for an update!

Would love to know how to create something like this now though please.

Cheers
Richard

[Tom]

Hi Richard,

You can achieve this using our Elements module.

1. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to after_footer
3. Add your HTML into the content area:

<div class="fixed-mobile-footer">
    <div class="inside-fixed-mobile-footer">
        Your button/CTA/whatever in here
    </div>
</div>

Then add this CSS:

.fixed-mobile-footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    color: #fff;
}

.inside-fixed-mobile-footer {
    padding: 15px;
}

@media (max-width: 768px) {
    .fixed-mobile-footer {
        display: block;
    }
}

That should get you started 🙂

[Author]

Posts