Header overlap on content on push page


#1

Hello,

Getting overlap header on push page. Below is my code:

<ion-header>

  <ion-navbar>
    <ion-title>{{item.title}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<img src="{{item.image}}" />
<p>{{jcip.timings}}</p>
sadsadsa
</ion-content>

Please help. Thanks in advance.


#2

I’m having this exact same issue! If I set the navbar content dynamically, then the header overlays the content. Any thoughts??


#3

As far as I know that’s the default behavior for any non-root page.

For your content to show properly, keep an empty navbar:

This will add that vertical blank space that will go behind the main header to bring your content down.

Then you can maybe use a card or other component to display your content.