Header bar in a nav-view

I’ve tried every incantation I can come up with to use a header bar while inside a nav-view and can’t get them to work. I’ve tried a div with the CSS classes and the ion-header-bar directive.

If I place the header bar above the ion-content, it doesn’t display. If I place it inside ion-content, it lays over the content.

For example (from the tab app, tab-chats.html), this header won’t display:

<ion-view view-title="Chats">
    <ion-header-bar class="bar-header bar-positive">
        Some gobbledygook.
    </ion-header-bar>
    <ion-content class="has-header">
        <ion-list>
          ...

But this will overlay the first chunk of content:

<ion-view view-title="Chats">
    <ion-content class="has-header">
        <ion-header-bar class="bar-header bar-positive">
            Some gobbledygook.
        </ion-header-bar>
            <ion-list>
              ...

I’ve tried working in the “has-header” class, but that doesn’t seem to make any difference.

BTW, ion-footer-bar seems to work fine.

Any ideas?

could you poste the whole html? with nav-view and so on?

your second code-block is totally wrong.

use the first one with out has-header class.

Base template:

<ion-nav-bar></ion-nav-bar>
<ion-nav-view></ion-nav-view>

Your view:

 <ion-view view-title="Chats">
    <ion-header-bar class="bar-header bar-positive">
        Some gobbledygook.
    </ion-header-bar>
    <ion-content>....

But instead of adding a new ion-headerbar you can set stuff for the nav-bar you initially add

look in the docs:
http://ionicframework.com/docs/api/directive/ionNavButtons/

If I modify the “search.html” partial from the sideMenu app:

<ion-view view-title="Search">
  <ion-header-bar class="bar-header bar-positive">
      Some gobbledygook.
  </ion-header-bar>
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

No header displays on the page.

I want to put some status info to carry through many of the pages in the app. I also tried modifying the index.html as below:

<body ng-app="starter">
    <ion-header-bar class="bar-header bar-positive">
        Some gobbledygook.
    </ion-header-bar>
    <ion-nav-view></ion-nav-view>
</body>

This might do the trick, but when I tried to view it in the “Ionic View” app, only that header bar showed on the pages and the nav bar was gone.

Please use the example code of the docs
index.html:

<body>
  <ion-nav-bar>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>
</body>

in your view:

<ion-view view-title="Search">
  //set buttons
  <ion-nav-buttons></ion-nav-buttons>
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

if you want to carry the same specific header for multiple views you need to create a base state and the other views are sub views.

Create a View/state with the nav-buttons and title you want -> and in the ion-content you put anothe ion-nav-view.
The states with the same “header” should hang into this ion-nav-view