CODEWITHSUNDEEP
ionic-frameworkionic4
maaz
maaz

Reputation: 3664

Ionic v4: place Logo in center of ion-header

   <ion-header mode="ios">
     <ion-toolbar class="ion-no-padding" mode="ios" color="secondary">
      <ion-buttons mode="md" slot="start">
        <ion-button (click)="toggleMenu()">
         <ion-icon slot="icon-only" src="assets/icon/hamburger.svg"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>My Navigation Bar</ion-title>
    </ion-toolbar>
 </ion-header>

This works perfectly for the Ion title in the center. I want to add a logo to the center instead of the text. Tried adding ion-icon inside ion-title but it didn't work. 

    <ion-title>
     <ion-icon slot="icon-only" src="assets/icon/logo.svg"></ion-icon>
    </ion-title>

Upvotes: 1

Views: 4514

Answers (2)

Tomas Vancoillie
Tomas Vancoillie

Reputation: 3878

Why don't you use ion-text-center for the ion-title?

<ion-header>
  <ion-toolbar>
    <ion-title class="ion-text-center">
      <ion-img src="../../assets/img/logo.png"></ion-img>
    </ion-title>
  </ion-toolbar>
</ion-header>

Upvotes: 5

Mostafa Harb
Mostafa Harb

Reputation: 1675

Its prefared to put the logo inside a div and giv it a class name

.classname {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transperent;
}

And now every thing should work normally but i think if you put this class for ion-toolbar even the ion-button will be put in center ..

Upvotes: 1

Related Questions