Refactoring ion-navbar into custom component causing overlap

I noticed I had a lot of repeated code and functionality in my ion-navbar, so I thought it might be a good idea to create a custom component to factor it out. For some reason, this is causing problems where now the header/navbar is overlapping the status bar. I could just factor out a smaller part of code instead, but I’d like to understand why this is causing a problem.

custom navbar component html

  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  <ion-title>{{ title }}</ion-title>
  <ion-buttons end class="desktop-buttons">
    <button ion-button (click)="signIn()">
        <ion-icon name="person" padding-right></ion-icon>
        <span>Sign In</span>

custom navbar ts

import { Component, Input } from '@angular/core';
import { ModalController, ToastController } from 'ionic-angular';
import { LoginModalPage } from '../../pages/login-modal/login-modal';

  selector: 'custom-nav',
  templateUrl: 'custom-nav.html'
export class CustomNavComponent {
  @Input() title;

    private toastCtrl: ToastController,
    private modalCtrl: ModalController) { }

  signIn() {
    const loginModal = this.modalCtrl.create(LoginModalPage);
    loginModal.onDidDismiss(toast => {
      if (toast) {
          message: toast,
          duration: 3000,
          position: 'bottom'


  <custom-nav [title]="'Search'"></custom-nav>