I have a html page that starts with
I want to have a button to be able to show a slide menu.
<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-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.
Why the button does not slide?
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.
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
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.
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.