Full Width ionic 2 <ion-menu>


I’m trying to make a menu (or menu page) that will be 100% width.

How can I achieve this?

I’ve tried something like:

<ion-menu type="overlay" [content]="content" width="500">

or even

<ion-menu type="overlay" [content]="content" width="100%">

but no luck…

Is there any solution for this issue ?

You could try in your SCSS:

.menu-inner { width: 100%; }


If i increase the menu-inner width the closing animation doesn’t work properly. i am looking for a solution which calculates all including animation.

In the docs (Overriding Ionic Sass Variables) there you can find the variable $menu-width with a default of 304px, which you could override in your app.variables.scss.

But I think only px values are allowed here.

Yes, But i have two menus and i want two different widths for each of them so it doesn’t work. Anyhow i did it with CSS changes. the code is below

width: calc(100% - 50%) !important;
transform: translate3d(calc(100% - 50%), 0px, 0px) !important;

1 Like