[Support request] How to have a sticky right sidebar

[Jin]

Hi there

I have a widget on the right of the page that I want to float as the user scrolls up / down.

How can I implement this?

[Fernando]

Hi Jin,

Are you referring to the entire right side bar? If so, it wouldn’t fit.

Usually, it’s just one widget in the sidebar that’s made sticky if the sidebar is content is long.

Let us know.

[Jin]

Hi Fernando

Yes, just one widget. Is that possible to implement?

[Jin]

Actually, when you refer to a “widget”, are you referring to a “container” in GeneratePress? I’m thinking of a few elements (which can be wrapped into a single container).

Please refer to this.

[Ying]

You are using WP columns which will be difficult to make it sticky.

Can you use the Grid block of GenerateBlocks instead?

[Jin]

I am using GenerateBlocks. You can view my layout here.

[Jin]

Ying

I’ve made a video explaining what I’d like to do because I don’t think I explain in well in writing. Please listen so my voiceover and screencast here.

[Ying]

Hi Jin,

Thanks for the video, I understand what you are looking for, but as I replied in my last comment, you are using WP columns block which is very difficult to make work as it doesn’t have an inner container inside the sidebar.

Can you try using the Grid block of GB instead to make the sidebar?
https://www.screencast.com/t/xiRHuJg3

[Jin]

Ying

I don’t understand what you mean. I think that I am using GenerateBlocks. I have the plugin installed and think that I’m using it.

I don’t understand what you mean by “doesn’t have an inner container inside the sidebar”.

I don’t know how I can make what I have now to “the Grid block of GB”. I looked at your screencast link and don’t understand what that means.

[Ying]

I took a screenshot in a page editor, as you can see these are 2 different blocks, Grid block is from GB, columns block is from WP:
https://www.screencast.com/t/vrEmJGvrH

The HTML structure of the Columns block doesn’t have an inner container that we can target to make it sticky, so please use the Grid block from GB.

I hope I’ve made it clear.

[Jin]

Ying

Okay I finally understand what you mean. Didn’t realise the difference between grid and columns.

The area where the sidebar is has now been updated to a grid block.

Please give me directions on how to make it sticky or let me know if I missed something.

Thanks

[Ying]

Awesome, now you can add this CSS:

@media (min-width: 768px) { {
.gb-container.gb-container-43b143dc > .gb-inside-container {
    position: sticky;
    top: 100px;
}
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Jin]

I’ve added the CSS to the page and cleared the cache but nothing is happening. Am I supposed to give the container that I want to float a CSS class name?

[David]

Hi there,

it will require a little more work than that.

1. Can you edit the page, select the Column you have for your sidebar.
In Advanced > Additional CSS Class(es) add: custom-sidebar

2. Select the Container Block that has the items you want to Float. And give that an Advanced > Additional CSS Class of is-sticky

3. Publish those changes.

4. Remove any of the previous CSS and add tbis instead:

@media(min-width: 769px) {
    .custom-sidebar > .gb-inside-container,
    .custom-sidebar > .gb-inside-container > .gb-container,
    .custom-sidebar > .gb-inside-container > .gb-container > .gb-inside-container {
        height: 100%;
    }
    .is-sticky {
        position: sticky;
        top: 100px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts