- This topic has 12 replies, 3 voices, and was last updated 2 years, 2 months ago by
David.
-
AuthorPosts
-
November 26, 2019 at 8:42 pm #1078973
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
November 26, 2019 at 10:34 pm #1079034John
Ah I figured it out – was easier than I thought…thanks!
November 26, 2019 at 11:23 pm #1079080Leo
StaffCustomer SupportGlad you got it sorted 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 13, 2019 at 7:41 am #1103357FunkyCss
Hi can you tell us how you did it ?
December 13, 2019 at 11:56 am #1103617David
StaffCustomer SupportHi 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/January 8, 2020 at 12:14 am #1125319John
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!January 8, 2020 at 5:08 am #1125483David
StaffCustomer SupportThanks for replying
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 5, 2020 at 3:30 pm #1519788barbara
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!November 5, 2020 at 4:05 pm #1519812Elvin
StaffCustomer SupportHi 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?"November 8, 2020 at 6:39 am #1522436barbara
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!November 8, 2020 at 7:45 am #1522693David
StaffCustomer SupportHi 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/November 8, 2020 at 9:25 am #1522791barbara
Thanks a lot!
November 8, 2020 at 2:55 pm #1523046David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.