Ion-menu-button not working on website mode

Toggling perfectly working on mobile mode (small screen), but not working on website mode (widescreen). How can I solve it


Do you use ion-split-pane?

yes …

  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="push">
        <ion-list id="inbox-list">
          <ion-list-header>Hi Tripurari Singh</ion-list-header>

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

        <!-- <ion-list id="labels-list">

          <ion-item *ngFor="let label of labels" lines="none">
            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
            <ion-label>{{ label }}</ion-label>
        </ion-list> -->


        <div class="logo">
          <ion-img src="assets/imgs/fareway_logo.png"></ion-img>
          <ion-label>V 1.0.0</ion-label>

    <ion-router-outlet id="main-content"></ion-router-outlet>

By default, the split pane will expand when the screen is larger than 992px. And the ion-menu will always be displayed and cannot be hidden with the ion-menu-button.

I want like as the sidebar of the ->

Ini this situation, you must create custom function to toggle ion-menu.

` <!-- <ion-split-pane contentId="main-content">`
  </ion-split-pane> -->

I commented above the tag , it’s working according to requirement.