MenuToggle button doesn't appear when pushing a page, but does when I use setRoot


#1

The title probably says it all. Here’s some context.

I have a page called “create-channel”, this page is supposed to be accessible from another page that the user can navigate from the sidemenu.

The create-channel page has this:

<ion-header>
  <ion-navbar>
   <ion-title>Create Channel</ion-title>
   <ion-buttons end>
     <button ion-button menuToggle icon-only>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-buttons>
  </ion-navbar>
</ion-header>

In the same way I have added the menuToggle button to all pages.

The problem is that for some unknown reasons the button doesn’t display at all when I go to it,

for eg. the user goes to the page Foo where they can click on a button which takes them to this page, but only the back button appears (since I push the page on the nav stack using navCtrl.push)

In my attempt to solve the issue I just tried using nav.setRoot and tada, the menuToggle button was there. The problem is I do not want to set it as root, that is supposed to be page that the user can navigate from using a back button.

In a previous project I was doing a similar thing and the menu button was visible without any issues, not sure what’s wrong with this, there aren’t even many changes. Only change I made related to the navigation toolbar was the SCSS variable that changes the order and just to be on the safer side I even reverted that change to the default to check whether it caused the issue but nope the results were negative.

Any ideas what could be causing the problem?


#2

Found the answer:

This is the default behaviour, MenuToggle button would only appear on root pages, and not on sub-pages. So the trick is to add persistent="true" to the <ion-menu> element being used.