Ionic side menu button remains with gray shadow on slide gesture to close menu

Ionic Framework
1

I’m developing an app which has a side menu, upon testing on my physical device and emulator, i have noticed that when I open the side menu clicking on the <ion-menu-button></ion-menu-button> and try closing it by swiping to the left the <ion-menu-button></ion-menu-button> remains focused/selected (with gray shadow in background). I’ve tried many things but can’t seem to get it to work. Wondering if someone around here has been through this same situation and could help me out.

Thanks in advance.

Code:

<ion-header>
    <ion-toolbar>     
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
      <ion-title>Destaques</ion-title>
    </ion-toolbar>
</ion-header>

------------------------------------------------------------------------------------------------

<ion-split-pane>
    <ion-menu side="start" menuId="first" contentId="content1"   >
        <ion-header>
          <ion-toolbar color="primary">
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
              <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                  {{p.title}}
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>

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

</ion-split-pane>
2

Solved!!

solved it using following scss:

ion-menu-button{   
      --background: transparent!important;
      --background-focused: transparent!important;
      --background-hover : transparent!important;
}
1 Like