Ion-menu not displaying first item

Ionic Framework ionic-v3
1

Hi All,

I have a menu. But it does not display the first item on the list (I think it is hidden behind the ion-toolbar).

As you can see below, the first item (‘Market’) is not visible, but it is in the list:

enter image description here

Here is the DOM, as you can see all menu items are there:

enter image description here

app.component.ts

this.pages_person_admin = [
  { title: 'Market', component: SearchJobsPage },
  { title: 'Market Favourites', component: SearchFavouriteJobsPage },
  { title: 'Postings', component: SearchPostingsPage },
  { title: 'Favourite Postings', component: SearchFavouritePostingsPage },
  { title: 'Messages', component: ChatsPage },
  { title: 'Profile', component: PersonPage },
  { title: 'Logout', component: LogoutPage },
  { title: 'Map Locations', component: MapLocationsPage },
  { title: 'Map Range', component: MapRangePage }
];

This makes me think there is something wrong with my html. The ion-toolbar and ion-content seem to be scrunched together.

app.html

<ion-menu [content]="content" id="authenticated-person-admin">
  <ion-toolbar [class]="ios ? 'menu-toolbar' : ''">
    <ion-title [class]="ios ? 'menu-title' : ''">
      <div class="item-avatar-img" id="menu-item-avatar-img-person-admin"></div>
      <div class="item-avatar-name" id="menu-item-avatar-name-person-admin"></div>
    </ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages_person_admin" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>
2

Please ignore. It was a silly css mistake on my side