Header aligns title and icon in a weird way

@chiaraluisa wrote:

Hey 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:

<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
  }

Posts: 4

Participants: 2

Read full topic