How to make the sidebar sticky?

[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

[David]

Hi there,

try this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Karsten]

Thank you, David.

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Isaac]

Hi,

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

Thanks

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Isaac]

Hi,

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

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

[David]

Awesome – thanks for sharing

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[epickenyan]

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

[Alex]

Hi, maybe it works for you.
https://es.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

Cheers

[Author]

Posts