Ion-header overlaps the ion-content

Ionic Framework ionic-v3
1

I have a very simple app so far, but I can’t figure out how to fix the overlapping of the content (header on top of the content). I have created a component header that contains the header as the name suggest.

header.html

<ion-header>
	<ion-navbar color="dark">
		<ion-title>
			Some Title
		</ion-title>
	</ion-navbar>
</ion-header>

I have been trying to use it on different pages, but it always overlaps the content of the page.

page.html

<app-header></app-header>

<ion-content padding>
	<h1>Some Page</h1>
</ion-content>

I have tried using div tag instead of ion-content, and also tried using class="has-header", but nothing seems to be working. Although, if don’t use the header as a component such as the following, it works fine. But I want to use the header as a component so that I can reuse it on other pages.

page.html (don’t want to have it like this)

<ion-header>
	<ion-navbar color="dark">
		<ion-title>
			Some Title
		</ion-title>
	</ion-navbar>
</ion-header>

<ion-content padding>
	<h1>Some Page</h1>
</ion-content>
2

(I have some information in the back of my head that you can mess with the header and put it into your own component as it then isn’t recognized by all CSS etc any more - but I am not sure if this is correct. You might want to search the forum or google with this info bit and see if you can find anything)

3

You might forgot to share the information that you are referring to.

4

No, I just remember reading about it here in the last few weeks.
If I had a link to the information I referred to, I would have posted it.

5

This worked for me:
header-toolbal.html

<ion-toolbar>
  <button ion-button icon-only menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>

  <ion-title text-center>
    {{title}}
  </ion-title>

  <ion-buttons end>
    <button ion-button (click)="doAwesomeStuff($event)">Button Text</button>
  </ion-buttons>
</ion-toolbar>

page.html

<ion-header>
  <header-toolbar [title]="My Awesome Title"></header-toolbar>
</ion-header>