Make ion-side-menu open over ion-side-menu-content

In my current project I would like to have the side menu open over (above) the content.
Ideally the side menu would be transparent and act as a kind of overlay over the main content.
Is this somehow possible with the given directive?

Any help would be very appreciated :slight_smile:

1 Like

You solved this with ionic framework??

I have the same problem, Apparently, there is not a easiest way to make this with ionic… So We need to solved this with the old way.


No, sorry for my bad english, I meant to say that I would like to behave it the way I described.

So far I couldn’t come up with an easy Ionic solution, so I decided to ask the community first.

Your english is ok… mine stinks. :P.

I’m looking the same for my app, so… If you found any solution, please share with the comunity :)…


Looking in the directive code it adds a translate x, you want it to be 0.

To have the menu visible the z-index must be increased: {
    z-index: 5 !important;

Though I don’t think you’ll want to alter Ionic’s core code. You could create your own directive with copying the sideMenuContent directive and alter as pleased.

This looks promising, I’ll take a look at it later, and will tell you about how it worked out for me!

That CSS move the menu to the front without animations, the things is, how you remplace that directive for new one, without change the core code of ionic? I don’t find any handler for that… :frowning:

There is this component we have right now.

To make it work with the current side-menu codebase would too big of a hack.
So we’ve pushed it out to an external ion.

I have the same problem, I find a customized side-menu template and I tweak it a little bit. See if it helps :slight_smile: