Site logo

Archived topic

Q2W3 doesn't work. Please help to make right sidebar widget sticky!

7 replies · Started by Trạng on August 29, 2021

Viewing posts 1–8 of 8

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 :)

This archived topic is closed to new replies.