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


#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.


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