Side menu in app.html ios transition not working


I have a side menu in app.html and when I click the side menu icon in ios it does not animate properly as shown in the docs. It is not pushing the navbar with it. I can’t see why this is happening but maybe I am implementing it incorrectly.

I understand the navbar isnt part of the page it is pushing but I want the side menu to be on the navbar inside the app.html, not on individual pages as I will be implementing tabs into the application and having a global side menu over the tabs. I have attached a gif to show what I mean.

app.html code:

<ion-menu [content]="mycontent">

  <ion-header no-border>
    <ion-navbar color="primary">
      <ion-buttons right>

      <ion-title>menu title</ion-title>

      <p>some menu content, could be list items</p>

<ion-header no-border>
    <ion-buttons right>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
    <ion-title>global title</ion-title>

<ion-nav #mycontent [root]="rootPage"  swipeBackEnabled="false">

Ionic info:

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.4.2


    Node       : v6.10.3
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.6.1


Your menu button is on the wrong side and something seems to be wrong with the iOS version in general - the title and the system tray bar are overlapping.


Yes, I think it is because I have removed the navbar from the home page and placed one navbar inside the app.html,

As for the menu button, I have just moved it to the right side for design purposes.