Placing tabs in the header

Ionic Framework ionic-v3
1

I’m trying to put some tabs in the header of the page because I have other tabs at the bottom of the page but when I put them in ion-navbar the ion-title in the nav-bar is hidden also the content of TEAMWORK page doesn’t appear like this

image
screenshot.PNG1006×864 15.4 KB

and I want it to be like this

image
screen2.PNG1005×865 16.6 KB

How can I solve this issue ?

this is my code

<ion-header>

  <ion-navbar >

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

    <ion-title >Boards </ion-title>

    <ion-tabs  tabsPlacement="top">
      <ion-tab  [root]="tabFavorite" tabTitle="FAVORITE"  ></ion-tab>
      <ion-tab  [root]="tabTeamwork" tabTitle="TEAMWORK" ></ion-tab>
      <ion-tab  [root]="tabFollowed" tabTitle="FOLLOWED"  ></ion-tab>
      <ion-tab  [root]="tabShared" tabTitle="SHARED WITH ME" ></ion-tab>
    </ion-tabs>

     <ion-searchbar ></ion-searchbar>

    <ion-buttons end>
      <button ion-button  ><ion-icon name="search"></ion-icon></button>
    </ion-buttons> 

  </ion-navbar>


</ion-header>
2

In addition to being a rather confusing UX, I don’t believe multiple sets of tabs on a single page are supported.