Title is on another height than ion-buttons in toolbar

Ionic Framework ionic-v3
1

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>

image
image.png1049×307 11.7 KB

2

inspect the css of icons and text and change the difference

3 

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.

4

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

5

Ye, it’s all from my app.scss

I didn’t find any important via browser debugging.

6

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