Ionic: hide backdrop in ion-menu

Question

I have an Ionic app using an ion-menu to open a burger menu. However, I don't want to have the backdrop on the right as shown in this screenshot:

What I want to have is this (without the backdrop):

The ion-menu:

<ion-menu side="start" type="push" menuId="first" contentId="main" class="burger-menu">...</ion-menu>

I've tried about everything in CSS:

.burger-menu {
  // Doesn't work
  --backdrop: none !important;
  backdrop-filter: none !important;
}

// Doesn't work
ion-menu#backdrop {
  display: none !important;
}

// Doesn't work
ion-menu > ion-backdrop {
  display: none !important;
}

// Doesn't work
ion-backdrop.menu-backdrop {
  display: none !important;
}

// Doesn't work
:host(.menu-type-push) .show-backdrop {
  display: none !important;
}

But none of them seem to work.

EDIT: here's what I'm seeing in the console when I open the menu.

Answer 1

The backdrop is inside the shadow tree of the ion-menu element, which means CSS will not work.

According to the documentation about ion-menu , the backdrop is a CSS Shadow Part being exposed. Therefore, you can use the ::part() pseudo-element which allows you to select elements inside of a shadow tree in order to style them.

ion-menu::part(backdrop) {
    background-color: transparent;
}

Learn more about CSS Shadow Parts when styling the Ionic Framework.

Edit

It looks like the CSS Shadow Parts are not implemented in versions prior to Ionic 5.
You can override the --ion-backdrop-color variable instead.

global.scss

:root {
  ion-menu {
    --ion-backdrop-color: transparent;
  }
}

Working fine on Ionic 4.