Floating header on mobile

I’m new to Bubble so apologies if this is an easy/silly question.
I am creating a PWA designed (solely) for mobile and have the bare bones of it coming together.
I’ve watched a bunch of tutorials (there’s some great ones out there!).

The issue I’m having is when you scroll up, the body content is re-appearing above the floating group at the top which doesn’t look great.
Also the phone time & signal strength icons are white against a white background.
Lastly is there an (easy) way of removing the scroll bar that appears on the right on mobile?

You should check this out


it has features that will take care of that issue

Otherwise, it is quite difficult without using some CSS

Thanks. I’ve had a look through that. Would it be the ‘update header’ feature that does this?

I’m not familiar with the product…you might want to reach out to the developer to request information and specific details

Ok. Thanks

You should check this post. I am having the same problem with my app and have neither yet been successful in finding a good solution. The below post is what I am trying right now and it seems to help with some issues at least. Let me know if you found another solution!

Thanks. I had seen that thread but was reluctant to start adding in css as it’s something I don’t understand at all!

i never encounter the problem you described but did encounter it at the start.
make sure to right click to send your header to the front and that it starts at y coordinate of 0 px and experiment with the background colourof your page as well as the header to avoid the overlap.

Had the same issue. I don’t know what the correct fix is, but here is a workaround: Add a floating group 100% width, 100px height, same color as your header. Set the top margin to -100. Your content will scroll below this group and will not be visible. The group appears below the time/battery, etc.


thanks for this solution @coachecho. Worked perfectly for me.