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.

4Q6luf30i9.gif1385x759 549 KB

app.html code:

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

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

      </ion-buttons>
      <ion-title>menu title</ion-title>
    </ion-navbar>
  </ion-header>

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

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

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

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

System:

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