How do you create multi-column layout options with a fixed sidebar and fluid content?

Community How-to
1

Thank you for taking the time to invest in this question. I am looking into more dynamic driven content for clients and I have several requests for directory, category and other content widgets. These widgets can be static or fixed to the top of a column or they can be fluid and continously move down the side of the page as you scroll.

I am wondering how to build out a page/site template with a multi-column layout which has fixed or fluid- or even based on scroll depth - sidebars.

Here is a basic static example - ThemeZee Demo - Smartcube
Here is a basic fixed example - Free WordPress Themes – Anders Norén

FOOD FOR THOUGHT
I could just build in a multi column flexbox with some CSS etc. But I am wondering if anyone else has built something like this and they could explain any pit falls.

PS - This also seems like something Sitejet should build out as I have a gut feeling I cannot be the only web dev that needs something like this for my clients.

Thanks,
Max

1 Like
2

Hey Max,

Thanks for writing us. Funny you come up with that, because I also thought this is a very good feature that we should make easily accessible for Sitejetters. So actually, we pushed this through a while back and you can find a preset of this under Features → first preset:

grafik
grafik654×682 83.3 KB

If you like to try building this yourself, you can mimic this quite easily:

  • Use only one unequal column on the left side and fill it with all the content
  • Use a container where you add all the content on the right side and make that one sticky.

8930c5b9b8a0a7db7e41edb7780aed5e

The element should be sticky until there is new content in the area of that element. As an example: https://codepen.io/enatario/pen/eKzxzY

Let me know if that helps?

1 Like