Add sidebar After table

Hi there,

If you wanted to build this in a single page then you would need to create the sidebar manually using GB Grid Block.

So the Structure to the page would be:

1. Container Block for the Comparison section.
2. Container Block with Grid Block for the Sidebar and Main Content.

Otherwise you would need to Hook in the Comparison table above the content... could be done manually using a Block Element but unless you can serve that content dynamically you would have to create a separate element for each and every post with this layout.

Thanks David, I think the grid block gives us more flexibility.

I have added the table of content in the left container.

How do we mnake it sticky?

https://criticalmass.it/monopattini-elettrici/

Ok so inside the Sidebar column - you will need to:

1. add a Container Block and in the Settings > Advance > Additional CSS Class(es) add: sticky as i see you already have some CSS for this.

2. then move all your sidebar content inside that container.

Thanks David!

Hey David,

I have tried to apply the same technique for a grid row but it doesn't work.

This is our website:

https://criticalmass.it/monopattini-elettrici/#Monopattini_Elettrici

and this is what we want to achieve when you scroll:

https://www.qualescegliere.it/monopattino-elettrico/

Is this done with a plugin or we can achieve something like this manually?

Sticky elements are relative to their parent container. ie. they only stick inside their parent container. Which means the parent container has to be tall enough to remain in viewport when scrolling down ( or up ).

So if you wanted the top row ( where the list of bicycles are ) to stick then it and all the content after it would have to be in the same parent container ie.

Parent Container
- Child Container 1 - Title / Featured Image / Text
- Child Container 2 - with Sticky CSS
- Child Container 3 - with your sidebar/content layout

Its a complicated layout.

That other site is using a completely different method - the sticky row is actually a duplicate element that uses JS to and position: fixed.

Hi Daivd,

Ok, I have recreated the structure as suggested and added the CSS to the child container, inner containers. Nothing seems to work...Any idea why?

Try adding this CSS:

.gb-container.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  z-index: 100;
  top: 100px; /* adjust to top position */
}

Thank you very much David! Looks amazing

Glad to be of help - its really great to see this kind of layout being created with GP + GB :)