- This topic has 25 replies, 2 voices, and was last updated 3 years, 2 months ago by Leo.
-
AuthorPosts
-
January 17, 2019 at 5:30 am #784498Karsten
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.
January 17, 2019 at 5:37 am #784512DavidStaffCustomer SupportHi there,
try this CSS:
@media (min-width: 769px) { #right-sidebar { position: -webkit-sticky; position: sticky; top: 0; } }
January 17, 2019 at 6:25 am #784535KarstenThank you, David.
This CSS keeps the sidebar sticky, but I see this message. Please check.
January 17, 2019 at 6:36 am #784546DavidStaffCustomer 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….January 17, 2019 at 9:12 am #784824KarstenAh, 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 #784850DavidStaffCustomer 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; } }
February 19, 2019 at 1:08 am #814262IsaacHi,
How would I use this code for BOTH left and right sidebars please?
Thanks
February 19, 2019 at 5:30 am #814427DavidStaffCustomer 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.
February 19, 2019 at 6:04 am #814454IsaacHi,
Problem is I can’t even find a plugin that will achieve this…
February 19, 2019 at 6:09 am #814460IsaacScratch 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 #814478DavidStaffCustomer SupportAwesome – thanks for sharing
February 19, 2019 at 6:40 am #814500IsaacWell 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 #814759DavidStaffCustomer 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.
March 3, 2019 at 11:19 am #827642epickenyanI 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 gonzalez vidalHi, 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.