CODEWITHSUNDEEP
javascriptcssionic-frameworkionic2ionic3
Royi Bernthal
Royi Bernthal

Reputation: 462

Ionic 3 - Don't change home button to back button in navbar

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.

2) Setting hideBackButton="false" completely hides the back button, but it doesn't mean that the home button is shown instead, neither is shown.

<ion-navbar hideBackButton="false">

Upvotes: 1

Views: 1975

Answers (1)

Duannx
Duannx

Reputation: 8726

Use ion-toolbar instead of ion-navbar: 

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

Upvotes: 1

Related Questions