iOS Add to home screen and upper side of the Nav bar becoming see-through

Need help Mobile
1

Hello
It could be a really basic question but i am new to Bubble and desperately need help to solve this issue.

I created a Navigation bar by using reusable element, setting it as a floating group in Appearance tab.

It works fine when using mobile Safari browser, but when i use “add to home screen” and open the website, upper side of the navigation bar becoming see through.
(i don’t even know whats it called-iOS Status bar-am i right?)

And the tricky part for me is that, i made couple of different apps in bubble and i made all navigation bar exactly the same way, reusable, floating group.
But like attached pictures, only purple one has this issue and the others are fine.

IMG_6536
IMG_65361125×615 45.9 KB

IMG_6538
IMG_65381125×328 33 KB

IMG_6537
IMG_65371125×361 34.5 KB

IMG_6535
IMG_65351125×523 53.3 KB

I want to make a full-colored-to-top Nav bar like a Blue one below, but i really don’t know whats the difference and how to set this up as i want.
Thanks for the help in advance

1 Like
2

Hi,

Have you found a solution to this problem by any chance? I am running into the same problem at the moment.

Kind regards,
Pim

1 Like
3

I’ve experienced this, but several years ago. I don’t recall exactly how I got rid of it, but unless someone beats me to it, I’ll look back in the app and reply back with the solution. It’s a frustrating issue.

2 Likes
4

The “Add Home Screen” feature allows users are always to create shortcuts to specific web pages on their device’s home screen, making it easy to access without having to open a web browser

Reason for seeing the navigation bar:

  • Design aesthetics: Many websites intentionally design the navigation bar to stand out when added to the home screen, making it more modern and less minimalist
  • User Experience: An intuitive navigation system can provide a clean and immersive experience, especially for full-screen content like videos or images.
  • Platform guidelines: Apple’s design guidelines can encourage developers to use transparent navigation bars to create a consistent experience across apps and websites

If you are having trouble with the navigation bar view when adding a website to your home screen, it could be:

  • The designers have intentionally designed the site to look the way it does.
  • There may be bugs or bugs in the website code.
  • Your device settings may affect the appearance of the navigation bar.

To resolve this issue if you can:

  • Check the developer settings on the website: If the website allows you to customize the appearance, look for different options for the navigation bar.
  • Try to clear your browser and cookies: sometimes, corrupted data can cause unexpected behavior but it’s okay.
  • Update your iOS to the latest version : Make sure you are using the latest version of iOS, as updates often include bug fixes and enhancements.
  • Contact the website support team: If you are still facing issues, contact the Mobile app development company for authenticated help.