Make the first Widget as Sticky in Sidebar.

Hi there,

You can target that widget ID like this:

#custom_html-8 {
    position: sticky;
    top: 0;
}

Not too sure what I'm looking at with the second question - can you explain a bit more?

Hi there... It's not working...and it's not responsive... and also see #custom_html-8 { position: sticky; top: 0; } written at the ad of the html widget

It also only sticks till the sidebars length and stops

And lets just fix this for now if you dont mind and then I can explain my 2ns question.

The code does work - it needs a little tweaking - but it will not extend past the last side bar widget:

#custom_html-8 {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    z-index: 100;
}

You may be better off using a Sticky Widget plugin.

It works better now... but it only stays sticky till the length of the sidebar and not after... did you take a look... please take a look at it....

Not seeing the CSS being added. Did you remove it?

Yes because it wasnt responsive and was not looking good. SHould I add it again?

You can try wrapping the CSS so it's desktop only:

@media (min-width: 769px) {
    #custom_html-8 {
        position: -webkit-sticky;
        position: sticky;
        top: 80px;
        z-index: 100;
    }
}

If that is still not good enough, then you might need to look into a plugin like this:
https://en-ca.wordpress.org/plugins/sticky-menu-or-anything-on-scroll

Yes, but please visit the website life falcon dot com you will see what I mean... it only stays within the sidebar and overlaps all other widgets.

Just visited the site and not seeing the sticky CSS added at all.

it only stays within the sidebar and overlaps all other widgets.

As far as I understand isn't that how sticky supposed to work?

The first image of the "follow us on facebook" shows up on all the other widgets and they get blocked as we move down... please have a look at the website.

and it stops loading till the end widget. I want it to go all the way.and not show over other widgets...let me show you the screenshot.

https://ibb.co/7rRYrFs

Try this CSS - it will allow the widget to move further down the page.
The z-index: 100; value determines if it is sits in front of the other widgets. Remove that if you do not want it to sit i front.

@media (min-width: 769px) {
    .right-sidebar.one-container .site-content {
        display: flex;
    }

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

    #custom_html-8 {
        position: -webkit-sticky;
        position: sticky;
        top: 80px;
        z-index: 100;
    }
}

It fixed the "no loading part till the end" However...It's still not working properly. Some parts of it is overlapping the sticky header and it still shows over the category.
Moreover, it's also blocking the other widgets as well... which looks bad for user experience.

You can see that from the screenshot below.

https://ibb.co/jknvs6W

I'm not seeing any of the issues you've shown in the screenshot now.

Looks like the widget is now the last widget in the sidebar and it seems to work alot better?
https://www.screencast.com/t/MNmNX5z6QCO

Unfortunately this is the best we can do in terms of the scope of this forum.

Please try the plugin suggested if you are still not satisfied.