List behind header bar

ionic-v1
1

I have a left slide out menu that contains a ion-header-bar followed by a ion-list. The list begins behind the header bar so I can’t see the first item in the list. What have I done wrong here? It looks like this:

<ion-side-menu side="left">
    <ion-header-bar class="bar-dark">
      <h1 class="title">Settings</h1>
   </ion-header-bar>
   <ion-list>
       <a class="item item-icon-right" href="#">Learn<i class="icon ion-monitor"></i></a>
   </ion-list>
</ion-side-menu>
2

Try adding ion-content

<ion-side-menu side="left">
    <ion-header-bar class="bar-dark">
      <h1 class="title">Settings</h1>
   </ion-header-bar>
   <ion-content>
   <ion-list>
       <a class="item item-icon-right" href="#">Learn<i class="icon ion-monitor"></i></a>
   </ion-list>
  </ion-content
</ion-side-menu>
3

Yep. That was the problem. Thank you!

1 Like