-
Hi! I used CSS from this forum to make my client’s right sidebars sticky. It works on the Homepage and on Posts but not on Category Pages.
Login creds are in the private area.
Here’s an example of a Category Page under Articles in the Top Menu:
https://www.thebigidealab.com/category/money/decentralized-money/decentralized-debt-free-money/
Here’s the code I placed in Additional CSS:
/* sticky right sidebar */
@media(min-width: 769px) {
.sidebar.is-right-sidebar > .inside-right-sidebar {
position: sticky;
top: 50px;
}
}The code is in the element, as I can see it in the Inspector. It just doesn’t work.
Maybe the content of the Category pages isn’t long enough? I tried:
#right-sidebar {
min-height: 100vh;
)Also tried making that container min-height: 100% and also Position: Relative
Thanks for any help!
-
Hi Theron,
Try this instead:
@media(min-width: 769px) { .sidebar.is-right-sidebar > .inside-right-sidebar { position: sticky; top: 50px; } #right-sidebar { min-height: 100%; } } -
Thanks so much for your quick reply.
Unfortunately, that didn’t work. The CSS is being applied to both elements but there’s no change. Works fine except on Article Category Pages.
I checked for overflow being hidden in the container holding the sticky sidebar, and made it relative. Tried changing min-height to 100vh.
-
Hi there,
it is working, Its just the page content is not long enough to see it working.
If there were more posts in the archive you will see it work. -
Hi, David! You’re right. I put in a couple of test posts and the sidebar was sticky until it ran out of content.
I thought that could be fixed by making the container holding the sticky content 100vh, or 100%. (Or is it the container holding the sticky content itself?)
I’ll just make an element for the two banners we wanted to stay on the screen. Thanks for your help, Fernando and David.
-
If you were to increase either the height of the main content ( with more posts ) or force the height of the sidbar to be taller then the post content then it would work.
Glad to be of help
-
I tried:
#right-sidebar {
min-height: 400vh;
}It works. But now I know why some sites won’t let me read sidebar content below the screen, until I’m about past the main content.
Feel free to add further tips or tell me why this works this way. Problem is solved for now though. Thanks again!
-
That would be fine.
You could also try increasing the min-height of the Content instead as an alternative and retain the code I shared.
Example:
@media(min-width: 769px) { .sidebar.is-right-sidebar > .inside-right-sidebar { position: sticky; top: 50px; } #right-sidebar { min-height: 100%; } .content-area{ min-height: 400px !important; } }
- You must be logged in to reply to this topic.