Anyone know how to stop this overlapping behaviour using new Responsive Enginer?

Hi Bubblers,

I’m trying to create a responsive Sidebar, Navigation and Main area.

Here’s a mockup so it’s easier for you to explain

I set all elements to rows but I am getting overlapping behaviour.

Anyone know to make the Sidebar stay on the left and the navigation bar sit next to it without overlapping?

Shouldn’t it be 1 row (left Group A, and a right Group containing b and c) and then the right Group with b & c set to columns with both stacked?

@jayyoms Have a look at it here - https://bubble.io/page?type=page&name=responsive_2&id=blog-help&tab=tabs-1

I’m still finding my way around the new responsive engine so this may not be the only way to build this UI.

Is it an option to set the margin of section B to the width of section A?

1 Like

Thanks Himanshu, this link doesn’t seem to take me to the app you wanted to show.

This is what I’m seeing

Thanks NoCodeNinja!

I tried your approach, and got some weird behaviour

Initially it looked like it might have been working but I realised I had the newly created group on the right set to Fixed, that won’t work due to responsiveness

Still playing around with it

1 Like

Okay this seemed to work.

I don’t know why this is, but it seemed to do the trick!

I created a video share to help others

4 Likes

Ah my bad. I changed the page name after sharing the link. Here’s the correct link Blog-help | Bubble Editor

2 Likes

thanks, your setup was helpful too!