Ion-Side-Menu only float/slide inside Ion-Header

ionic-v1
1

Hi, guys.
I’m trying to create an ion-side-menu on my app but when I click on the icon to expand it only expands inside the ion-header-bar, not over the ion-content too.

How can I overlap the ion-content with the ion-side-menu content too, not only overlap ion-header-bar?

Here is my code:

<ion-header-bar>
    <ion-side-menus enable-menu-with-back-views="true">
        <ion-side-menu-content>

            <ion-nav-bar align-title="center">
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left" style="color: #011937;">
                </button>
            </ion-nav-buttons>

            <ion-nav-title>
                <ion-title style="color:#465261; font-family: Roboto; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal;">Test</ion-title>
            </ion-nav-title>

            <ion-nav-buttons side="right">
                <img src="img/elemento.png" style="width:25px; height:25px; margin-top:3.5px;"/>
            </ion-nav-buttons>
            </ion-nav-bar>

            <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content> 

        <ion-side-menu side="left">
            <ion-header-bar style="border-bottom:none;">
            <h1 class="title" style="font-family: Roboto; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; color: #011937;">[enter image description here][1]
                Menu
            </h1> 
            </ion-header-bar>
            <ion-content style="margin-top:121px; margin-left:36px; margin-right:16px;">
            <ion-list>
                <ion-item menu-close href="#/home" style="border-top:none; font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: left; color: #011937;">
                Página Inicial
                </ion-item>
                <ion-item menu-close href="#/login" style="border:solid 1px #979797; font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: left; color: #011937;">
                Perfil
                </ion-item>
                <ion-item menu-close href="#/home" style="border:solid 1px #979797; font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: left; color: #011937;">
                Configurações
                </ion-item>
                <ion-item menu-close href="#/home" style="border-bottom:none; border-top:solid 1px #979797;  font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: left; color: #011937;">
                Sair
                </ion-item>
            </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
</ion-header-bar>

And below is my ion-content tags.

2

ion-content should be inside <ion-side-menu-content> tag…

3

The content that I’m saying is the content of my view, not the menu content items, ok? My view “body”, above the ion-nav-bar.

4

5141

Look the images to understand what I’m trying to say. The menu only opens inside the header, not over the content below, see?

5

I undestand fully what you are saying, now what I am trying to say is put the content inside the menu-content. In your example it was I think outside the side menu that’s why only the header was adjusting when side menu was open…