My ion-content starts under nav-bar

Ionic Framework ionic-v3
1

Hi again!

I have an issue, and I search all the afternoon but all the things I’ve tried didn’t worked. The thing is, that I have a page that content a ion-list, but I don’t know why, that list starts under the navbar, and the first item don’t shows well.

My html code right now:

<ion-header>
  <ion-header>
    <ion-navbar>
      <ion-title>Entrenamientos predefinidos</ion-title>
      <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
      </button>
    </ion-navbar>
  </ion-header>
</ion-header>


<ion-content padding class="has-header">

     <ion-list>
        <ion-item>
          <ion-avatar item-start>
            <img src="assets/img/avatar.png">
          </ion-avatar>
          <h2>Infierno piernil</h2>
          <p>Te va a dejar las pataas del revés</p>
        </ion-item>
        <ion-item>
          <ion-avatar item-start>
            <img src="assets/img/avatar.png">
          </ion-avatar>
          <h2>Brutal hardcore experience</h2>
          <p>Britil hirdciri ixpiriinci</p>
        </ion-item>
        <ion-item>
          <ion-avatar item-start>
            <img src="assets/img/avatar.png">
          </ion-avatar>
          <h2>Lightweight babeeeeee</h2>
          <p>Ronnie y sus pechotes</p>
        </ion-item>
        <ion-item>
          <ion-avatar item-start>
            <img src="assets/img/avatar.png">
          </ion-avatar>
          <h2>Strongman Tarrako's breakfast</h2>
          <p>Muerte a los flamencos</p>
        </ion-item>
        <ion-item>
          <ion-avatar item-start>
            <img src="assets/img/avatar.png">
          </ion-avatar>
          <h2>Parra es to pesao</h2>
          <p>No te van a llamar</p>
        </ion-item>
        <ion-item>
          <ion-avatar item-start>
            <img src="assets/img/avatar.png">
          </ion-avatar>
          <h2>El Melli de Lepanto</h2>
          <p>Cómprate unas manos</p>
        </ion-item>
        <ion-item>
          <ion-avatar item-start>
            <img src="assets/img/avatar.png">
          </ion-avatar>
          <h2>Dani me come los huevers</h2>
          <p>Brutal abandon en el wow</p>
        </ion-item>
      </ion-list>

</ion-content>

and a screenshot of my device inspector that shows the issue:

image

2

Why do you have nested <ion-header> elements? Additionally, what is the point of the “has-header” class?

1 Like
3

Wow, I had not seen the double ion-header O_O

The has-header class is one of the “solutions” of the problem that I found googling.

4

All of us, including me, have cargo culted at some point in our careers. It’s a really important instinct to try to avoid as much as possible.

1 Like
5

This solved my problem. The nested header tags of the hell :open_mouth: thx for the help and sorry for my lamentable vision hahaha