Sidemenu with header ontop of header

Hey guys I’m facing some problems

Problem 1: I’ve tried adding the ion-header with the ion-menu in the app.html (app component html file)
and its working fine on android but on iOS devices,
the header stays on top of the side menu

Is there’s a way of adding a header with the side menu other than a header in every html file ?

Problem 2: I have to put marginTop on the first element of the page other wise the content would start UNDER the header

Correct view:
image

Incorrect View when i put header in app.html
image

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>