Display component on top of your app in all situations (e.g. offline notification)


I have a standard app, Ionic 5, capacitor 2.4. The app consists of multiple pages. Each page has a header and a content area. My app communicates with a backend. In case the app is offline or can’t communicate with the backend for any other reason, I want to display a little notification banner on the very top of the app, in all screens, in all situations. So I tried to insert my notification banner in the app component:

  <ion-split-pane contentId="main-content">
    <ion-router-outlet id="main-content" [swipeGesture]="false">

app-connectivity-status is my little component which displays the notification in case there is a connection issue.
Unfortunately this leads to the banner just overlapping the header of the pages, it’s not pushing them down (which is probably the desired behaviour of a header in general…).
And in case a page spins up a modal, the notification is not visible at all in this modal of course.

As this is kind of a common scenario (I’ve seen a couple of apps which display connection issues to the user like that), is there any recommended solution for such a case?
Of course it would work to put my component in all headers of all pages, and also on top of all modal components, but this would be somewhat annoying I think.

Any help appreciated,