<ion-nav-bar> inside <ion-content>

ionic-v1
1

Hi guys,

Is it proper way to nest navbar inside content component , in order to have “static” header (not fixed).

Or maybe someone can suggest other way to achieve that?

2

Even for static headers one should not put the <ion-navbar> in side <ion-content>. If you want to have static headers for all the screens in application, you should include <ion-navbar> outside the <ion-content>

3

Hi @addwebsolution,
Thank you on fast reply.

Do you maybe have some code example or link to see how to achieve static header effect?

4 
<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>Follow us on Twitter</ion-list-header>
    <ion-item>
      <ion-icon name="ionic" item-start></ion-icon>
      @ionicframework
    </ion-item>
  </ion-list>
</ion-content>

I guess this is what you are looking for, this is static code from the ionic framework itself.

5

Thanks on code.
But I think that i did not examplained good.

image
image418×699 13.5 KB

So as you may see, is scrollable, and it feels like the header is always fixed to the top of the screen (sticky header), when user scrolls.
I want to have scrollable header along with content. So when user scroll to the bottom - header should not be visible…

6

In the case you have described, below mentioned code may help you.

<ion-content padding class="home-class">

  <ion-header>
    <ion-navbar class="no-tap-scroll">
      <ion-title>Messages</ion-title>      
    </ion-navbar>
  </ion-header>

</ion-content>
7

Thanks i will give it a try and let you know did that go well :slight_smile:

So seems possible nesting ion-header inside ion content