[Support request] CTA Image

[Dax]

Hello,

Rather than a button, I want to use a custom image as a CTA linking to another page. I would like it to follow the user as they scroll. I would also like it to be positioned on the left-hand side of the content.

Thanks in advance

[David]

Hi there,

You could place a HTML widget in the Left Hand Side-bar, then use some HTML Like this:

<a class="cta-link" href="url">
        <img src="url-to-image" alt="alternate-label">
</a>

Set that up and i can look at the CSS to make that element sticky.

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

[Dax]

Hello David,

That works great thanks. So how do I make it sticky? Do you need to see my site?

Thanks

[David]

It would be useful to see the Site. You can edit your original topic and use the Site URL field for privacy.

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

[Dax]

Hi David,

Done.

Thanks

[David]

Try this, i also tweaked its starting position for it to align with top of the first paragraph:

@media (min-width: 769px) {
    .site-content {
        position: relative;
    }

    #left-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
    }

    .inside-left-sidebar {
        height: 100%;
    }

    .inside-left-sidebar .widget {
        position: -webkit-sticky;
        position: sticky;
        /* change Top to a PX value to increase top position when sticky */
        top: 0;
        /* margin-top to adjust static position */
        margin-top: 25px;
    }
}

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

[Dax]

Thank you very much David! It works perfectly

[David]

Awesome – glad to be of help

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

[Author]

Posts