Ionic 3, transparent sidemenu

0

I have an Ionic 3 app with a sidemenu, and I would like to make the transparent background , but not the header, footer and content text. Something like opacity 0.45, but when I do, the text also takes the opacity, which I do not want. I will appreciate the help you can give me, thank you very much!

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menú</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content padding>
    <ion-avatar class="avatar" >
      <img src="../../assets/imgs/sssss.png">
    </ion-avatar>
    <ion-list>
      <button ion-item detail-none block menuClose *ngFor="let p of pages" (click)="openPage(p.page)">
        <ion-icon item-start [name]="p.icon"></ion-icon>
        {{ p.title }}
      </button>
    </ion-list>
  </ion-content>
  <ion-footer >
    <ion-toolbar>
      <ion-row align-items-center>
        <ion-col>
            <button ion-button full clear icon-left (click)="logout()">
            Logout
            </button>
        </ion-col>
      </ion-row>
    </ion-toolbar>
  </ion-footer>
</ion-menu> 
<ion-nav #content main [root]="rootPage"></ion-nav>

CSS

.menu-inner .item {
    background-color: transparent;
}
.ion-header {
    background-color: transparent; 
}
.menu-inner > ion-header, 
.menu-inner > ion-content, 
.menu-inner > ion-footer, {
    background-color: transparent;
}
.toolbar-title {
    color : #000000;
    text-align: center;
}
    
asked by Guille 02.11.2018 в 14:24
source

0 answers