I am facing an issue with my tabs navbar overlapping on my other subpages as well.
<ion-header>
<ion-navbar hideBackButton="true">
<span class="hdr-clr">Winkrr</span>
<ion-buttons start>
<button ion-button icon-only>
<ion-icon style="color:#ed145b;" name="ios-search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon style="color:#ed145b;" name="ios-notifications-outline"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon style="color:#ed145b;" name="ios-contact-outline"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-tabs tabsPlacement="top" tabsHideOnSubPages="true" primary>
<ion-tab tabIcon="md-globe" [root]="tab1Root"></ion-tab>
<ion-tab tabIcon="stats" [root]="tab2Root"></ion-tab>
</ion-tabs>
My sub page has its own navbar which I would like to customize.
<ion-header>
<ion-navbar hide-tabs>
<ion-title>personal-chat</ion-title>
</ion-navbar>
</ion-header>
In order to navigate, I use the following function:
onContact(){
this.navCtrl.push(PersonalChatPage);
}
I have encountered an issue where the same navbar appears on subpages even though I have set it up for the tabs page only in Ionic 2.