Ionic Menu Template not showing on mobile

Issue

I created my Ionic app with the wizard on their page and chose the template "menu". If I look at my app in the desktop version, it is totally ok as you can see here: Desktop view OK BUT IF I switch to the "mobile view" in my Browser (Firefox), the menu does not show up?? As you can see here: Mobile view no menu

This is my html code for the menu:

    <ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Netzwerkverwaltung</ion-list-header>
          <ion-note></ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item  routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label> 
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Solution

You put your ion-menu inside of an ion-split-pane.

So the visibility depends on the width of the windows!

1. U can open your sidemenu from mobile using a swipe from the border of the side of the menu.
2. Using menuController.toggle()
3. Or using ion-menu-button inside the ion-header!

The menu is hidden on smal screens!!

Docs:

IonMenuButton: https://ionicframework.com/docs/api/menu-button

MenuToggle: https://ionicframework.com/docs/api/menu-toggle

MenuController: https://ionicframework.com/docs/v4/api/menu-controller

Answered By - Niccolò Biagi