[Support request] Sticky button on Generatepress

[hailgp]

Hi Tom and GP Team,

Thanks for your best creation so far, Generatepress. 😀

I just wanna ask,

Can you show how to make a button that floating at the bottom of my website?

Thank you and regards.

[Leo]

Hi there,

Can you provide an example of what you are wanting to create?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[hailgp]

I’m not found the example(s) that fits for my questions, but…

I tried to search on Google and find this > https://divisoup.com/how-to-create-a-sticky-button-in-divi/

I want to stick that button on bottom of my website. Like I can give some call to action at this section.

I already knew that GP give nice tutorial for create a button, but not for sticking it like sticky menu.

Hope you can understand my question.

[Tom]

Hi there,

You could create a new Hook element, and apply it to the after_footer hook.

Your content would be this:

<div class="sticky-footer">
    Your content + button in here.
</div>

Then you’d add this CSS to your site:

.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    background-color: #222;
    color: #fff;
    padding: 10px;
}

Using Hooks: https://docs.generatepress.com/article/hooks-element-overview/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[hailgp]

Thank you, Tom. I’ll try it. 🙂

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ravi Dixit]

Hey, TOM!

I have tried your CSS and added hook as well…

It is working good… how can I make it animate like this page sticky button at bottom https://bloggerspassion.com/semrush-vs-ahrefs-review/

It should appear after scrolling a bit, same as you can see on the page above.

[Leo]

That will require custom javascript which is not within our support scope unfortunately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts