- This topic has 25 replies, 2 voices, and was last updated 1 month, 2 weeks ago by
Leo.
-
AuthorPosts
-
January 17, 2019 at 5:30 am #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
And here you can see what I would like to achieve.
GeneratePress 2.2.1GP Premium 1.7.7January 17, 2019 at 5:37 am #784512David
StaffCustomer SupportHi 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/January 17, 2019 at 6:25 am #784535Karsten
Thank you, David.
This CSS keeps the sidebar sticky, but I see this message. Please check.
January 17, 2019 at 6:36 am #784546David
StaffCustomer SupportThats 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/January 17, 2019 at 9:12 am #784824Karsten
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?
January 17, 2019 at 9:42 am #784850David
StaffCustomer SupportYou 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/February 19, 2019 at 1:08 am #814262Isaac
Hi,
How would I use this code for BOTH left and right sidebars please?
Thanks
February 19, 2019 at 5:30 am #814427David
StaffCustomer SupportHi 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/February 19, 2019 at 6:04 am #814454Isaac
Hi,
Problem is I can’t even find a plugin that will achieve this…
February 19, 2019 at 6:09 am #814460Isaac
Scratch that.
I’ve managed to find a widget plugin that will achieve the desired result.
If anybody is interested it’s this one:
February 19, 2019 at 6:24 am #814478David
StaffCustomer SupportAwesome – thanks for sharing
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 19, 2019 at 6:40 am #814500Isaac
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.
February 19, 2019 at 9:09 am #814759David
StaffCustomer SupportUnfortunately 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/March 3, 2019 at 11:19 am #827642epickenyan
I saw the WP Sticky Sidebar plugin working well with both sidebars. But I am not sure if it works for all browsers.
June 10, 2019 at 6:02 am #924717Alex
Hi, maybe it works for you.
https://es.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/Cheers
-
AuthorPosts
- The topic ‘How to make the sidebar sticky?’ is closed to new replies.