[Support request] How to make the sidebar sticky?

Home Forums Support How to make the sidebar sticky?

  • This topic has 21 replies, 7 voices, and was last updated 1 month ago by David.
Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #784498
    Karsten

    Hi Guys,

    I would like to keep the sidebar sticky (static) when user scrolls down the page.

    Could you please help me with CSS?

    Thank you

    Please check here the page.

    And here you can see what I would like to achieve.

    GeneratePress 2.2.1
    GP Premium 1.7.7
    #784512
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media (min-width: 769px) {
        #right-sidebar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
        }
    }
    #784535
    Karsten

    Thank you, David.

    This CSS keeps the sidebar sticky, but I see this message. Please check.

    #784546
    David
    Staff
    Customer Support

    Thats fine, the position: sticky; is a CSS3 property that the Customizer doesn’t recongnise. Just a note, this doesn’t work on Internet Explorer 11….

    #784824
    Karsten

    Ah, yes, I remember, thank you for this information.

    Two more questions:

    If I want to use the Sticky sidebar only on specific pages, how could I address this pages?

    Or if i don’t want the sticky sidebar on my blog page, how could I exclude the sticky sidebar here?

    #784850
    David
    Staff
    Customer Support

    You can use body classes to identify the page and also the :not pseudo class to ignore a page e.g this won’t apply to the blog:

    @media (min-width: 769px) {
        body:not(.blog) #right-sidebar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
        }
    }

    This would apply to just single posts:

    @media (min-width: 769px) {
        body.single-post #right-sidebar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
        }
    }
    #814262
    Isaac

    Hi,

    How would I use this code for BOTH left and right sidebars please?

    Thanks

    #814427
    David
    Staff
    Customer Support

    Hi there,

    unfortunately that is not possible using this method as elements within the same container become stuck together. It would require Custom Javascript to do this.

    #814454
    Isaac

    Hi,

    Problem is I can’t even find a plugin that will achieve this…

    #814460
    Isaac

    Scratch that.

    I’ve managed to find a widget plugin that will achieve the desired result.

    If anybody is interested it’s this one:

    https://wordpress.org/plugins/q2w3-fixed-widget/

    #814478
    David
    Staff
    Customer Support

    Awesome – thanks for sharing

    #814500
    Isaac

    Well it’s the best solution I can find.

    After extensive research, it’s almost impossible to stick both left and right sidebars without knowing complex code.

    That widget plugin will allow you to select and stick any widget you want, in any sidebar you want.

    It’s not the sidebar(s) itself.

    #814759
    David
    Staff
    Customer Support

    Unfortunately it is really complex doing this with code. Might be worth reaching out to the plugin author and ask if there is a function to apply it to sidebar classes. The only issue i can see is that both elements occupy the same parent container so results may not be as expected.

    #827642
    epickenyan

    I saw the WP Sticky Sidebar plugin working well with both sidebars. But I am not sure if it works for all browsers.

    #924717
    Alex
Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.