Archived topic
Sticky widgets
5 replies · Started by Constantino on April 8, 2021
Hi guys.
I want to put two or more sticky widgets on the right sidebar when scrolling down. It's possible? I have tried to sticky a widget and it works perfectly with this code:
@media (min-width: 769px) {
.site-content {
display: flex;
}
.inside-right-sidebar {
height: 100%;
}
.inside-right-sidebar aside:last-child {
position: -webkit-sticky;
position: sticky;
top: 8px; /*Adjust position */
}
}
Is it possible to add two or three widgets by adding some additional line of code? On the other hand, my container size is 975px, does that matter?
Thanks.
Hi Constantino,
Could you link us to the site and point us to the widgets that you want to be sticky?
You can use the private info field.
I am attaching an image with the widgets that I would like to fix using a CSS code. The last widget at the end (the one from Amazon) I would remove or put it higher).
Hi there,
you can remove the amazon sidebar widget through Appearance > Widgets.
You should see it on the Right Sidebar widget area. You can remove it from there.
Once you remove it, try this CSS:
@media(min-width:769px){
.inside-right-sidebar{ height: 100%; }
.inside-right-sidebar > *:nth-last-child(-n+3) {
position: sticky;
}
.inside-right-sidebar aside#text-3 {top: 10px;}
.inside-right-sidebar aside#media_image-2 {top: 380px;}
.inside-right-sidebar aside#recent-posts-3 { top: 690px;}
}It works perfect. Thanks a lot :-)
Nice one. Glad it works for you. No problem. :)
