Question: I am developing an Ionic application where I'm using the side-menu. When navigating to a template that's only a div for rendering Google Maps (native using cordova-plugin-maps). The side-menu is overlayed over the map. The weird thing is I can interact with the map through the side-menu.

It works fine when using Javascript Google Maps.

Here's a screenshot of how it looks:

[![enter image description here](https://i.stack.imgur.com/tA9rL.png)](https://i.stack.imgur.com/tA9rL.png)

The same thing appears on an Android device.

The help in resolving is highly appreciated!!

**EDIT:**
I forgot to mention that I'm transitioning from a normal page (not the side-menu), hence the back button above. I hope that makes it more specific.

Answer: 
scss ionic.app.scss or www/csss/

```
body.menu-open .menu.menu-left {
    visibility: visible;
}
.menu.menu-left {
    visibility: hidden;
}

```
Personally, I found an elegant solution (right menu) :

```
.menu.menu-right {
    transform: translate3d(100%, 0, 0) !important;
    -webkit-transition: transform 200ms ease;
    transition: transform 200ms ease;
}

.menu-open {
    .menu.menu-right {
        transform: translate3d(0, 0, 0) !important;
    }
}

```