[Support request] Sticky Sidebars help and feature request

[Kle]

Hi there,

I am trying to get both of my sidebars sticky.

With this code:

#right-sidebar {
    position: sticky;
    position: -webkit-sticky;
    top: -1320px;

I can get the right sidebar to stick, however if I set the left sidebar:

#left-sidebar {
    position: sticky;
    position: -webkit-sticky;
    top: -1320px;

The left sidebar goes off to the right on top of other content. How can I solve this?

Would be great to have the option on GPpremium to get the sidebars to stick properly, as is very useful. I tried a few plugins and most of them only allow one sidebar. . another one through widgets works but the problem is that when the site viewed on a different screen size it can get the sidebar stuck in an akward part of the website.

Would really good to have in GP a native option to stick them according to screen size, that when you scroll down they start to stick once they will be room for them to be viewed complete, because when setting say top -100 it might look good on one computer but in another screen gets chopped and so on.

Thank you.

[David]

Hi there,

the Content / Sidebar layout uses the Unsemantic grid with push / pull values that relatively position the sidebars. Using CSS sticky breaks that. Try this method:

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

    #primary {
        left: unset;
    }

    #left-sidebar {
        position: sticky;
        position: -webkit-sticky;
        top: 100px;
        order: -1;
        align-self: flex-start;
    }

    #right-sidebar {
        position: sticky;
        position: -webkit-sticky;
        top: 100px;
        align-self: flex-start;
    }

}

[Kle]

Thank you David, it doesn’t solve the issue of different screens but it works.

But unfortunately generated another problem, now when clicking some of the links on the same page with the sidebars and loading the page (after clicking) it loads from left to right and you can see that flickering.

Any way to avoid that?

[David]

I would need to see the site to see what the issue is.

[Author]

Posts