CODEWITHSUNDEEP
ionic3
user390517
user390517

Reputation:

How to center header title with subheader in Ionic 3

I am trying to create an ion header with a navbar and a subheader. I am using the code below. My problem is that I cannot center the logo image/text "verticaly" with the subheader. I would like the title to be centered at all times even if there is a back button. 

<ion-header>
 <ion-navbar>
  <button ion-button menuToggle end>
   <ion-icon name="menu" color=primary></ion-icon>
   </button>
  <ion-title><img src="assets/img/logo.png"></ion-title>
 </ion-navbar>
 <ion-toolbar>
  <ion-title> {{ 'TITLE' | translate }}</ion-title>
 </ion-toolbar>
</ion-header>

Upvotes: 0

Views: 833

Answers (1)

isaadabbasi
isaadabbasi

Reputation: 99

<ion-navbar>
  <ion-title>Header</ion-title>
  <p class="sub-header">Description</p>
</ion-navbar>

In the scss/css.

ion-navbar {
    height: 60px;

    p.sub-header{
        left: 0;
        top: 0;
        padding: 0 90px 5px;
        font-size: 1rem;
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
}

...

Upvotes: 1

Related Questions