Don't change home button to back button in navbar

Ionic Framework ionic-v3
1

I have something like that:

In my navbar I have a home button for toggling the menu.

The problem is, ionic automatically changes it from home button into back button when the nav stack has more than 1 page.

I need the button to always remain a home button that toggles the menu, regardless of how many pages there are in the nav stack.

<ion-header>

  <ion-navbar>

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

	<ion-navbar>

</ion-header>

Solutions that are not good for my case:

  1. It doesn’t happen if I use “setRoot” instead of “push” when changing pages, because then the nav stack always has 1 page.

However this is not an option for me, I’d like to keep using “push” and have the button remain a home button that toggles menu, instead of changing into a back button that goes back 1 page.

  1. Setting hideBackButton=“false” completely hides the back button, but it doesn’t mean that the home button is shown instead, neither is shown.

1 Like
2

I don’t understand your objection to using setRoot(), because the entire point of using push() is the back button and nav stack, which you are trying to subvert/eliminate.

1 Like
3

I have a fixed back button in the header near the home button, I only wrote here part of the code.

4

I have a similar situation with no resolution yet

I am going to Charts

this.navCtrl.setRoot(ChartsPage);

and there I have

<ion-header>
  <ion-navbar > <!--hideBackButton="true"-->
    <button menuToggle ion-button icon-only>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>

but I am getting the back button instead of hamberger…

What can i do ?

5

Solved it with workaround … not the best way but quick

<ion-header style="display: -webkit-box;">
    <button menuToggle ion-button icon-only persistent='true'>
        <ion-icon name="menu"></ion-icon>
      </button>
  <!-- <ion-navbar > hideBackButton="true" -->
    
    <ion-title>Area Manager Reports</ion-title>
  <!-- </ion-navbar> -->

</ion-header>
1 Like
6

thanks man it’s working

1 Like