How to make ion-menu list transparent in ionic 3


#1

Hello
how can i turn menu background to transparent in ionic 3

<ion-menu [content]="content" side="right" class="menu">
  <ion-header >
    <ion-toolbar class="toolbar" color="primary">
      <ion-title color="dark" class="menu" ></ion-title>   
    </ion-toolbar>
  </ion-header>
<ion-content class="menu">
    <ion-list no-lines >
  </ion-list>
  </ion-content>
</ion-menu>

.menu{
background-color: transparent;
}

but not working


#2

please help to solve this problem


#3

:pensive: :pensive: :pensive: :pensive: :pensive:


#4

This should work…

ion-content.menu{	
	ion-list {
		.item {
			background: transparent;
		}
	}
}

Good luck,
Oliver


#5

doesnt work is there any other method


#6

I tried it within a sample Ionic3 app …do you override at some point the class “.item” with “!important”?


#7

this is the solution :

.menu-inner{
background-color: transparent !important;
}

add this in app.scss


#8

It’s work in ionic Thank You


#9

The following elements need to be transparent (if possible, style inline to override all styles): .menu-inner, ion-item, ion-content