Access to safe area height or making it translucent

Is there a way to access the height of the safe area, or apply a background color to it?

I’m building a floating group that acts like a custom top app bar. When the page scrolls, the content behind it becomes visible in the safe area, which looks bad. Ideally, I’d like the floating group to extend into / be hidden behind the safe area instead.

If I turn on Bubble’s built-in top app bar, I can’t style the title or buttons the way I want, so I’m trying to recreate it manually. Is there any way to control or read the safe area height, or to give it a custom background?

ScreenRecording_11-14-2025 14-39-24_1

Did you manage to solve this? I think the only way is to hide the top.. I would also like to customize the top bar I will now start to figure out how to do it..

If you use a floating group w/ a background color & apply the safe area to the child elements only, the background color should apply to the safe area

2 Likes