Ionic sidemenu isn't really off canvas


Was working on a project where I have to add views unto the page. It used a custom plugin on the page where I added a view from the plugin unto the page. I am using the side menu template in my app and realised the ionic side menu isn’t really hidden but just taken to the back of the web view. I can mess around with the css and probably get it fixed but wanted to know if there was an easier way to do it using ionic. Moreover could you look into actually hiding the side menu in future releases? Thanks @mhartington

Here’s what it currently looks like:

As you can see the sidemenu isn’t active and it’s on top of a view(the black box near the top right of the sidemenu)


you are right the sidemenu is behind the views and content of the app.
But you need it there so the “drag” animation and feeling works. Because you slide the content to the right or left and show the sidemenu.


@bengtler toggling the display in css doesn’t affect the “drag” animation. Just tried it.


by default your page and your ion-views have a background, so you would not see the sidemenu in the background.

In other cases there is no simplier way


Can you please provide a codepen or some code to show what your sidemenu looks like.


Hi I meant the ionic sidemenu isn’t really off canvas. It’s hidden beneath the side-menu content. Implementation wise this isn’t truly convenient. A side menu if implemented should be off canvas and not just hidden using z-index. Makes it cumbersome in case one wanted to work on side-menu content


Not sure what you mean by “makes it cumbersome in case one wanted to work on side-menu content”

It works fine here in this codepen.