Header aligns title and icon in a weird way

Hey :slight_smile: I have a slightly weird visual bug in my header with the way the elements are aligned, and I can’t fix it with things like “margin-top: 20px;” in the scss…

It currently looks like this:
image

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title class="title">EVE</ion-title>
    <ion-icon class="score" name="trophy" (click)="showScore()"></ion-icon>
  </ion-navbar>
</ion-header>
  .score{
    float:right;
    margin-right:10px; //added so that it isn't pushed right to the edge
  //  margin-bottom: 20px; //doesn't work, makes the whole header wider somehow
  }

  .title{
  //  margin-top: 20px; //doesn't work, makes the whole header wider somehow
  }
<ion-header>

  <ion-navbar no-border-bottom color="primary">

    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>EVE</ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="showScore()">
        <ion-icon name="trophy"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>

wow thank you!! that works! should I change anything in the scss file?

You don’t need any scss…keep your code light :slight_smile:

I have a little problem here is my code

<ion-header>
 <ion-navbar>
    <ion-buttons>
        <img src="assets/icon/favicon.ico" width="30px" />
    </ion-buttons>
    <ion-title  style="font-size:110%">
        Healthios
    </ion-title>
  <ion-buttons end>
    <button ion-button icon-only (click)="showMenu($event)">
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-buttons>
 </ion-navbar>
</ion-header>

I imitate those example but when I tried to simulate app with android.
16

But when I simulate application with IOS:
02

I tried to use your code and change some icon, first icon is disappear.

What have I missed?
Thank you.

Updated:
I think I know the problem. When I go to look at ionic doc at title topic, IOS will arrange this code correctly, but android will not. Android will arrange font at left most and icon at right most.

Can you tell me how to solve this problem with out use this setting:

imports: [
   IonicModule.forRoot(MyApp, { mode: 'md' }),
]

I want android have its own charm, Can we hack it someway?