[Resolved] Sticky Banners

[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.

[Leo]

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/

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

[Leo]

That’s your call 🙂

[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.

[Leo]

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?

[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.

[Tom]

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;
}

[Luke]

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

Add it to CSS?

[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.”

[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.

[Tom]

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.

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

[David]

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>

[Author]

Posts