Title is on another height than ion-buttons in toolbar

Hi, i have problems with LOGO as title in IOS. In android, logo and buttons are on the same height. In the IOS LOGO is higher than buttons.

Example code:

<ion-header>
  <ion-toolbar>
    <ion-buttons left>
      <button ion-button icon-only (click)="navCtrl.pop()" class="backbutton">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
      <img alt="logo" height="40" src='assets/img/logo.png'>
    </ion-title>
    <ion-buttons end>
      <custom-buttons></custom-buttons>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

inspect the css of icons and text and change the difference


ion-title img {
  height: 20px;
}

ion-title {
  background-color: #121d27;
  color: #fff;
}

ion-buttons button[icon-only].backbutton {
  color: white;
}

.toolbar-background{
  background-color: #121d27;
}

That’s all CSS i have.

it can’t be all, maybe thats all of your own style, but there is also some default style, you can check it in your browser using the “arrow on box” next to the console button

Ye, it’s all from my app.scss

I didn’t find any important via browser debugging.

so you better find it if you want to make it look good :slight_smile: