Content overlap ion-header

Hi all! My problem is the following exemplified.

My code:

– app.html

<ion-header>
  <ion-toolbar>
    <ion-title>MyApp</ion-title>
  </ion-toolbar>
</ion-header>
<ion-nav #content [root]="rootPage"></ion-nav>

– home.html

<ion-content padding>
    The world is your oyster.
    <p>
        If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
    </p>
</ion-content>

– Result:


The content overlaid by the header is the expected result? How should I do to make content appear just below the header?

Already, thanks!

1 Like

Can anybody help me, please?

Your app.html should only really have the ion-nav in it. Move the ion-header to home.html above ion-content

Thanks for the reply, @jasonwaters! This really works!
But, in this case, I’ll have a ion-header per page. And my intention is to have only a “global” ion-header for all pages, without rewriting the same code (ion-header) for all pages.

How do I in this case?

1 Like

Ionic was built with the intention of reusing components across app pages. If you think about it, when you use the ion-header component, even on every page, it’s the same code that is reused. Plus using the template code on each page allows you to modify the header to uniquely fit pages as needed.

You may be trying to over-optimize my friend. :slight_smile:

Hi, @jasonwaters! Thanks again!

I agree with you that the ionic already helps us a lot. But imagine the case where I have a 20 navigation pages. Each with an ion-header with a title: MyApp. So, in a few days I need to change the title MyApp to MyApp 2.

The ionic does not provide a way to do something as a template and that allows me to change the title only in one place?

I would argue that having the same title across 20 pages is not an ideal UX pattern. But even so, a simple search and replace with a text editor will get the job done for you in a few seconds. :beers:

Same problem here. Enterprise app. More than 60 pages. For example 30 with menu visible, 30 with home, this on the left of the title. On the right i can have a mix of settings (share, delete, search, ecc.). It’s not good to repeat every time ion-header. Really. I would be glad to at least have a class=“has-header” to put on ion-content.

Example in ionic 1

<my-header-nav title="Title" has-menu="true" show-help-button="true"></my-header-nav>
<my-header-nav has-menu="true"></my-header-nav> // notice there is no title -> will fallback on a Logo
<my-header-nav title="Share" has-home-button="true" share="{{data}}"></my-header-nav>


I’m not confident on creating a class by myself because i don’t know how ionic determinate the header height.

Issue opened here -> https://github.com/driftyco/ionic/issues/8172

@jasonwaters if you still need example on real case use, i can share a real example of an ionic 1 big app that uses that component reduning a lot of repetitiveness)