Header overlay

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:

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

I’d like to have header similar to:

What is the best practice?

Thanks

2 posts - 2 participants

Read full topic