Archived topic
Q2W3 doesn't work. Please help to make right sidebar widget sticky!
7 replies · Started by Trạng on August 29, 2021
Hi there,
I install Q2W3 plugin to make right sidebar widget fixed. It's Gallery widget.
First, when I use the new widget block, I place block ID of the widget I want to fixed in to the custom ID of this plugin. But it does not work.
Then, I try to use Classic Widget and tick on "Fixed widget". It's still not work. (Screenshot)
Please help.
Hi there,
remove the plugin, its not required, then add this CSS:
@media(min-width: 769px) {
.inside-right-sidebar {
height: 100%;
}
.inside-right-sidebar .widget:last-child {
position: -webkit-sticky;
position: sticky;
top: 60px;
}
}
This will make the last widget sticky.
It works great, thank David!
So is there anyway that make the 2 last widgets sticky?
I only see 2 widgets - do you want the search and 'advert' both to stick?
If so you can simply make the whole sticky bar contents sticky, remove the old code and use:
@media(min-width: 769px) {
.inside-right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 60px;
}
}
Ah no, I mean I make case if now I add a html widget or text widget or a banner widget and I want this widget with gallery widget will be sticky so how should I customize it with code that you shared with me before?
In that case, its a little more tricky, but you can do this instead:
@media(min-width: 769px) {
.inside-right-sidebar {
height: 100%;
}
.inside-right-sidebar .widget:nth-child(2) {
position: -webkit-sticky;
position: sticky;
top: 60px; /* sticky postion from top of container */
}
.inside-right-sidebar .widget:nth-child(3) {
position: -webkit-sticky;
position: sticky;
top: 360px; /* Height of widget 2 plus sticky position from top */
}
Breaking that code down:
1. CSS Rule starting with .inside-right-sidebar .widget:nth-child(2) {
Selects the 2nd widget, and it sets its Top position to 60px. This is distance from the top of the container.
2. CSS Rule starting with .inside-right-sidebar .widget:nth-child(3) {
Selects the 3rd widget, and its Top position needs to be the height of the widget number 2 plus the 60px.
Yeah thank David. It's great. I have to admit that I'm zero at coding but Generatepress's support team helps me know a bit about CSS coding for the site :))) Thanks!
Really happy to hear that :)