Archived topic
How to add a sticky button
12 replies · Started by John on November 26, 2019
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
Ah I figured it out - was easier than I thought...thanks!
Glad you got it sorted :)
Hi can you tell us how you did it ?
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;
}
}
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!
Thanks for replying
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!
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.
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!
Hi there,
this CSS:
a.sticky-button {
background-color: #f00;
color: #fff;
}
/* hover colors */
a.sticky-button:hover {
background-color: #000;
color: #fff;
}
Thanks a lot!
You're welcome