[Resolved] Sticky Banners

Home Forums Support Sticky Banners

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1277118
    Luke

    Hi.
    I have two sticky banners in the widget on the right hand side of the page. Right now I am using Q2W3 Fixed Widget plugin to make these banners sticky. Is there something I can do to make these banners sticky without using the plugin? I’d like to deactivate this plugin but I don’t know what to do to make the banners sticky without the plugin? Maybe I need some special code? These two banners are in the same widget.

    #1277296
    Leo
    Staff
    Customer Support

    Hi there,

    A plugin is likely the best way to go.

    This is the one we usually recommend though:
    https://en-ca.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

    #1277434
    Luke

    You think I should change my plugin for the one that you recommended? I’ve noticed that the sticky banner overlaps the footer and I am also not sure if I should disable it for mobile devices?

    #1278071
    Leo
    Staff
    Customer Support

    That’s your call 🙂

    #1278240
    Luke

    Ok, but do you know what I can do to stop the sticky banner from overlapping the footer? You can check the link and scroll down to the bottom of the page.

    #1278284
    Leo
    Staff
    Customer Support

    Not sure if I’m seeing the issue.

    This is what I’m seeing at the bottom of the page:
    https://www.screencast.com/t/KifgA4P7rnw

    Is that not what you are seeing?

    #1278291
    Luke

    Are you using a smartphone? I think the widget on the right hand side of the page is not visible on the smartphone? Correct me if I’m wrong. I use a laptop and when I scroll to the bottom of the article the sticky banner overlaps the footer. I would send you a screenshot but I don’t know how to do it here.

    #1278352
    Tom
    Lead Developer
    Lead Developer

    Those plugins usually have an option to add the footer selector, which prevents them from overlapping it. In our case, .site-footer is the selector you would use.

    Alternatively, you could try this, but browser support isn’t as good as javascript (which those plugins use):

    #text-24 {
        position: sticky;
        top: 0;
    }
    #1278487
    Luke

    What am I supposed to do with this code `#text-24 {
    position: sticky;
    top: 0;
    }`

    Add it to CSS?

    #1278495
    Luke

    But in the setting for this plugin there is something like “Stop ID … You need to provide the HTML tag ID here. The position of that HTML element will determine the margin-bottom value.”

    #1278542
    Luke

    I entered the ID “footer-widgets” in the Stop ID field and it looks like it’s working. The only problem is that the last banner is affecting the footer beneath it, i.e. everything beneath that last sticky banner is clickable and the link is the same as the link of that last banner. But it’s not a big problem I think.

    #1279386
    Tom
    Lead Developer
    Lead Developer

    That seems to be happening because there is broken HTML in the banner.

    Make sure there’s a closing </a> element for the opening <a> element.

    #1280289
    Luke

    This is the code of my 2 banners. The banner at the bottom is affecting the footer beneath it, i.e. everything is clickable … Please have a look and tell me if everything’s OK with these two codes:

    <a href="http://mywebsite.com/pagewithanoffer/" target="_blank">
    <img style="    height: 350px;
        width: 100%;" src="https://mywebsite.com/wp-content/uploads/2020/05/banner.png">
    <a href="https://mywebsite.com/pagewithanoffer/" target="_blank">
    <img style="    height: 180px;
        width: 100%;" src="https://mywebsite.com/wp-content/uploads/2020/05/banner.png">
    #1280454
    David
    Staff
    Customer Support

    Hi there,

    as Tom said you’re missing a closing </a>

    For example your first HTML code should look like this:

    <a href="http://mywebsite.com/pagewithanoffer/" target="_blank">
        <img style="height: 350px; width: 100%;" src="https://mywebsite.com/wp-content/uploads/2020/05/banner.png">
    </a>
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.