How to make ion-menu list transparent in ionic 3

Ionic Framework ionic-v3
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

1 Like
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

2 Likes
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