SlideMenu does not slide


I have a html page that starts with <ion-view title="Mytitle">

I want to have a button to be able to show a slide menu.

<ion-view title="Mytitle">
  <ion-nav-buttons side="right">
    <button class="button button-icon" ng-click="dashCtrl.openRightSideMenu()">
      <i class="icon ion-navicon"></i>

I then create the rest

  <!-- Center content -->
      <!-- added something here -->

  <!-- Right menu -->
  <ion-side-menu side="right">
    <ion-header-bar class="bar-dark">
      <h1 class="title">TITLE</h1>
    <ion-content scroll="false">
        <ion-item ng-repeat="item in items" ng-click="dashCtrl.selectitem(item, $index)">

Now, if I click the button of my slide menu, the button stays on the right corner and the slide menu is displayed correctly.

  1. Why the button does not slide?

  2. Why I cannot just drag the button to the left to display the slide menu?

Hope that I was clear enough and thanks for your help

This is because the ion-nav-bar is not inside ion-side-menu-content.

Take a look at this codepen.

Hi mharthington,

I already tried before and it did not work.

Also, all the examples that I saw used the ion-header-bar and not the ion-nav-bar. Maybe this is the issue?

If I use the ion-header-bar inside the ion-view, the button does not show.

What your thought about it?

Can you put a codepen together? Looking over your code, using ion-nav-bar should resolve the issue.

Here is the CodePen

The toggle button is on the second page

Okay so in your example, your ion-nav-bar is outside of the side-menu, so I won’t move with the side-menu-content.

Instead use ion-header-bars for your example.

Your CodePen has this error:

Controller ‘ionNavBar’, required by directive ‘ionNavButtons’, can’t be found!

The ion-header-bar does not show because of that

Would you mind to help me?

Updated the codepen, All you needed to do was change ion-nav-buttons to div class="buttons" then place inside the header bar

1 Like

Great, it works! Thanks!

By removing the ion-nav-buttons, I will automatically loose the “back” button (ion-nav-back-button) that was shown automatically in my header, correct? Unless, there is a trick to have it back?

It is not really a big deal, because I can create my own back button, but was nice to have it handle it for you. :smile:

Correct, you will loose the auto back button.

If you want to have an auto-back button using ion-nav-bar, I’d suggest restructuring your app a bit. This way everything is unified under the sidemenu and you can use the ion-nav-bar.

Think our side-menu demo.

1 Like