Archived topic
How to make Last Widget Sticky without plugin?
12 replies · Started by Suraj Katwal on December 3, 2019
I have found something like this code for Genesis Theme to make last widget sticky.
/* Last widget Sticky*/
@media only screen and (min-width: 1024px) {
.content-sidebar-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.sidebar-primary .widget:last-child {
position: -webkit-sticky;
position: sticky;
top: 60px;
}
.admin-bar .sidebar-primary .widget:last-child {
top: 72px;
}
}Is there any way like this to make last widget sticky in GP
Thanks.
Hi there,
can you share a link to your site so i can take a look at the CSS required?
Currently, I am developing my site in offline mode. Thank you.
Try this CSS it applies to the right side bar:
@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: 80px; /* Adjust to suit position */
}
}Thank You. It is working.
Glad to be of help.
The only problem is the widget will overflow the footer. How to solve this?
Screen recording here.
Try applying some margin-bottom to the .inside-right-sidebar aside:last-child CSS.
If still an issue - start a new topic where you can share you site and we will take a look.
For the moment I found another solution : I made the widget background transparent. It's a trick but it works. Thank you.
Aah - thats a good idea. Glad to hear you found a solution
Fantastic trick!
How can I make the two last widgets sticky?
Thanks!
Hi there,
can you raise a new topic and share a link to your site, and ill see if we can provide the right CSS
All right thank you very much David.
