Placing tabs in the header

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

and I want it to be like this

How can I solve this issue ?

this is my code


  <ion-navbar >

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

    <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-searchbar ></ion-searchbar>

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



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