Dynamically responsive containers for sidebar and footer elements

Hello all.

I am new to Webflow, and I am not even sure what I am trying to do is possible with the tool, but I was hoping if there was a way, someone in here could point me in the right direction.

Maybe even @PixelGeek can chime in as I know you get fancy with some layouts.

I am looking to create some nested sidebar and footer elements that are hidden off screen until the user engages with them, but when they come out, I want the rest of the content on the screen to respond dynamically as well and adapt in size on screen.

Here is a video example of the type of interaction I am talking about - https://imgur.com/a/ZOC1Ljw

For practical purposes, I want the main content to be 100% wide, and when the sidebar opens, I want the sidebar to take up 30% of the screen and the main content to shrink to 70% with the content inside remaining responsive. Is that doable with Webflow?

Furthermore, could I have multiple of these elements on a single page?

I have started playing with an experiment to mock up the example site which is linked to below.

ray.do - site with functionality I am trying to replicate (click on an article to open the sidebar)
Share link - My webflow experiment to replicate that interface
Live version - webflow subdomain
Another example - Of the functionality I would like to replicate.

1 Like

Ok, so I have found a ton of references on how to do some of this, but nothing actually gives me what I am looking for fully. Most of the suggestions revolve around pushing the content to match the sidebar, but this would presume that the user does not need equal access to both pieces of the interface when the sidebar comes out.

I need something that resizes the containers on the page dynamically, not just pushes the div to the side with the menu.

1 Like

Hello! I have exactly the same problem! I made a sidebar popup and it opens using the hide / show interaction. I absolutely do not understand how I can make it appear on the side of the page with a content offset. I looked at examples, but also not good at programming to do this.

Hello @Ivan_Chayka You can do this with Flexbox. Here is a cloneable that you can use or reverse engineer to solve your problem.