IONIC 4 - ion-menu is not overlaping the pages

Question

I have a ion-menu in my app but he is clicking and scrolling at the page below. The click only works in ion-button

I tried to use type="overlay" but didn't works

app.component.html

 <ion-app>
  <ion-menu type="overlay" id="right-menu" contentId="right-menu"         
   side="end" swipeEnabled="false" mode="md">
   <ion-content>
  <app-side-menu></app-side-menu>
   </ion-content>
  </ion-menu>
  <ion-router-outlet id="right-menu" main></ion-router-outlet>
</ion-app>

here is my app: http://prntscr.com/ofg6mi

the side menu is working fine but the correct functionality its supposed to not interact with the page below.

Answer 1

Try using the example in the documentation. https://ionicframework.com/docs/api/menu

<ion-menu side="end" type="push">
  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>End Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

Have you added custom css?