[Resolved] How to add a sticky button

Home Forums Support How to add a sticky button

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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

    #1079034
    John

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

    #1079080
    Leo
    Staff
    Customer Support

    Glad you got it sorted 🙂

    #1103357
    FunkyCss

    Hi can you tell us how you did it ?

    #1103617
    David
    Staff
    Customer Support

    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;
        }
    }
    #1125319
    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!

    #1125483
    David
    Staff
    Customer Support
    #1519788
    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!

    #1519812
    Elvin
    Customer Support

    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?"

    #1522436
    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!

    #1522693
    David
    Staff
    Customer Support

    Hi there,

    this CSS:

    a.sticky-button {
        background-color: #f00;
        color: #fff;
    }
    
    /* hover colors */
    
    a.sticky-button:hover {
        background-color: #000;
        color: #fff;
    }
    #1522791
    barbara

    Thanks a lot!

    #1523046
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.