Combining a navbar and a sidebar

JosephNoCode · 2022-06-07T14:26:51.280Z

Hello there ! I require a little bit of help,

I want to create an app that combines, both a sidebar and a navbar like shown in the picture below:

Capture d’écran 2022-06-07 à 16.21.321816×1320 73.5 KB

I’m using the new responsive beta update:
To get this result, I put my page in layout : ROW
And both the block the serves me a sidebar and the one for the navbar as Align To Parent.
Well, now it works well, but I would like to put a group on the rest of the page (what’s yellow on the picture up there), so that I could add elements later.

But, the disposition doesn’t let me do this:
the block stacks before or after the navbar as shown in this picture in black:

Capture d’écran 2022-06-07 à 16.25.521782×1302 72.8 KB

Has anyone got any idea ?
Thanks a lot, and have a great day !

twkrk · 2022-06-07T14:39:13.164Z

Have you tried FloatingGroup element? You can put both navbar and sidebar as FloatingGroup as it will stay on place all the time.

rpetribu · 2022-06-07T15:42:30.057Z

I made a very simple setup for you

image1163×739 45.3 KB

Link to the editor here.

JosephNoCode · 2022-06-08T06:58:24.891Z

I am using the new bubble responsive Engine,
if I put those 2 blocks in floating groups then the block below will be covered by those 2.

I’m trying to make my app the most responsive I can
I’ve used a block for the static navbar while the screen is over 768 px
and used a floating group that covers 70% of the screen when the width is below.
As it is done in the gmail mobile app for example.
I had issues with a floating group not taking the full height of the page
I’ve used a trick by adding a CSS style the body of the page, and a overflow hidden which makes the page impossible to scroll while the floating sidebar is opened in small screens.

Dealing with floating groups makes everything so much more complicated, I’m still a begginner.
If you don’t see quite well what I’m telling you, I can use videos or pictures of course !
Thanks again for your answer

JosephNoCode · 2022-06-08T07:03:20.080Z

Thanks a lot ! That seems like the answer I was searching for, it even seems much more simple that what I’ve done