Archived topic
Sticky Sidebar feature?
5 replies · Started by Dimitrios on September 26, 2021
It would be great if we could have a sticky sidebar option to turn ON or OFF in GeneratePress.
Something like this where the last widget of the sidebar is fixed when scrolling down.
Check out this DEMO ---> https://css-tricks.com/a-dynamically-sized-sticky-sidebar-with-html-and-css/
I have seen other members asking the same in here, so I was wondering if you can add this feature in GeneratePress. It looks so much more professional.
Hi there,
I think there's an argument to be made here that this is more of a plugin/custom CSS kind of thing.
The CSS itself is very simple (as shown in the article you linked to).
Of course, I can always be convinced otherwise if enough people want it directly in the theme.
Let us know if you need help implementing the CSS :)
Hey Tom,
thanks for the reply.
Could you actually help me implement this, please? I tried to but it didn't work. I think the code needs some customization to work in GeneratePress.
You see, some of the solutions suggested here are not working the same for each device. Because it only sets the top offset for the current device.
I would like for it to work dynamically in every device and size, and that article seems to do just that if I am not mistaken.
I would really appreciate it if you helped me do this for my site. Again, I want just the last widget to be sticky not the whole sidebar.
Hi Jim,
This CSS generally works:
@media(min-width: 769px) {
.site-content {
display: flex;
}
.inside-right-sidebar {
height: 100%;
min-height: 100%;
}
.inside-right-sidebar >*:last-child {
position: sticky;
position: -webkit-sticky;
top: 60px;
}
}But If you've tried this already and it didn't work for you, can you link us to the site in question? so we can inspect its page structure and use it as reference for CSS writeup. :D
It works!
Thanks a lot, guys!
Nice one. No problem. Glad to be of any help. :)
