[Support request] Sticky Sidebars help and feature request

Home Forums Support Sticky Sidebars help and feature request

  • This topic has 3 replies, 2 voices, and was last updated 11 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1039920
    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.

    #1040043
    David
    Staff
    Customer Support

    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;
        }
    
    }
    #1040787
    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?

    #1041102
    David
    Staff
    Customer Support

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.