I am facing a challenge with the positioning of the logo in IOS compared to Android. On Android, the logo and buttons are aligned at the same height, but on IOS the logo appears higher than the buttons.
Here is my code snippet:
<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="20" src='assets/img/logo.png'>
</ion-title>
<ion-buttons end>
<custom-buttons></custom-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
https://i.sstatic.net/LiEkz.png
--EDIT
CSS:
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;
}