Header overlay

Ionic Framework
1

I’ve developed a mobile application for both Android and iOS using Capacitor, Ionic, and Angular. My header doesn’t have an overlay. I’d like the status bar to have the same background color as my header (which is dynamic). I tried adding the following code:

    await StatusBar.setBackgroundColor({ color: '#00000000' }); // Colore trasparente
    await StatusBar.setOverlaysWebView({ overlay: true }); // Per coprire la barra di stato

This is the result:

image
image719×193 18.3 KB

However, unfortunately, the header moves upward and the logo gets covered. How can I resolve this?"

I’d like to have header similar to:

image
image719×173 28.6 KB

What is the best practice?

Thanks

2

Best practice is using Safe Area Padding.

3

For which purpose you are developing the app? Is this for logo designing? I am keen to know this.

4

How do you come to know about it? Can you plz tell!