Created
Mar 4, 2023 7:12 PM
Tags
Mobile
Featured
Adjusting the iOS status bar when building PWAs with Bubble
PWAs are en vogue. And Bubble comes with a lot of PWA features and settings right out of the box. But unfortunately, the iOS status bar color is not one of them. That's why I've created a short tutorial on adjusting the iOS status bar when building PWAs with Bubble :)
- Bubble editor: https://bubble.io/page?type=page&name=ios_notch&id=bh-examples&tab=tabs-1
- Header code:
- CSS code:
- Further reading (article from video): https://codeburst.io/progressive-web-apps-customize-status-bar-23c4b2de590f
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style>
body {
background-color: #058AF7;
}
</style>
That’s it. Keep it simple!
Damian