How to add a sticky button

[John]

Hi there,

I am wondering is it possible to add a sticky button site wide using the elements/hooks modules?
The effect I am trying to replicate is shown here on this site:
https://invisiblechildren.com/
So want to replicate the donate button on the right hand side of the page.
Is that possible using GP or is there a better way to do it?
I have crawled the previous support topics but nothing quite fits the same description.

Many thanks!

John

[John]

Ah I figured it out – was easier than I thought…thanks!

[Leo]

Glad you got it sorted 🙂

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

[FunkyCss]

Hi can you tell us how you did it ?

[David]

Hi there,

something like this would do:

1. Create New Hook.
2. Add your button HTML eg.

<a href="url" class="button sticky-button">Button Label</a>

3. Select the after_footer hook.
4. Add this CSS:

.sticky-button {
    position: fixed;
    top: 50%;
    right: 0;
}

@media (max-width: 769px) {
    .sticky-button {
        display: none;
    }
}

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

[John]

Sorry – I never noticed the follow ups to this – yes it was something similar to the code David suggested.
I can share it with you if you have not figured it out from his.
Cheers!

[David]

Thanks for replying

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

[barbara]

Sorry, I’ll open this thread again. May I ask how can I style this sticky button? I just wish it was a different colour from the other buttons on the site.
Thank you very much!

[Elvin]

Hi Barbara,

Any chance you can link us to the page in question?

Please open a new topic (preferable) so you can use the private information text field.

Thank you.

A wise man once said:
"Have you cleared your cache?"

[barbara]

Hi Elvin, thank you for your reply.
The page is under construction, on a local installation.
I created the sticky button following the instructions above and it works perfectly. The only thing I want to do now is change its colour. Is this possible?
Thank you!

[David]

Hi there,

this CSS:

a.sticky-button {
    background-color: #f00;
    color: #fff;
}

/* hover colors */

a.sticky-button:hover {
    background-color: #000;
    color: #fff;
}

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

[barbara]

Thanks a lot!

[David]

You’re welcome

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

[Author]

Posts