Ionnavbar hidding content

ionic-v1
1

Hello guys, i’m trying to create my first ionic app, but I’m having problems with ion-nav-bar.

It hides everything I enclose in the <ion-nav-bar></ion-nav-bar> tags, I attached a simple example, that it’s having this issue.

<ion-side-menus>
    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-balanced">
            <button menu-toggle="left" class="button button-icon icon ion-navicon">Back</button>
        </ion-nav-bar>
        <ion-nav-view>
            <ion-view><h1>CLIENTS</h1></ion-view>
        </ion-nav-view>
    </ion-pane>
    
    <ion-side-menu side="left">
       <!-- Ion Option List -->
    </ion-side-menu>    
</ion-side-menus>

In the images, you can see how this code is working, you can see that the menu-toggle="left" attribute is working fine, but I can see the icon nor the “back” option on my nav bar.

Any thoughts?

image
Capture1.PNG540×701 2.74 KB

image
Capture.2PNG.PNG544×704 6.96 KB

2

Try using the <ion-nav-buttons> directive to add buttons in your header. Place the directive inside your <ion-view>.

3

for the backbutton you have to add:
http://ionicframework.com/docs/api/directive/ionNavBackButton/

and for the toggle button:
http://ionicframework.com/docs/api/directive/menuToggle/

<ion-nav-bar>
  <ion-nav-back-button>
  </ion-nav-back-button>

  <ion-nav-buttons side="left">
   <!-- Toggle left side menu -->
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
</ion-nav-bar>
4

I tried with <ion-nav-buttons> inside my <ion-nav-bar> tags and It works, I can see the content of my ion-nav-bar BUT now I can’t see the text “CLIENTES” that is under the ion-nav bar.

This is what I updated:
<ion-pane ion-side-menu-content> <ion-nav-bar class="bar-balanced"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon-round"></button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view> <ion-view><h1>Encuestas</h1></ion-view> </ion-nav-view> </ion-pane>

5

Same as with @James_Parsons I can see the content of my ion-nav-bar but now The word “CLIENTES” is not displayed It disapeared

Any idea?