CODEWITHSUNDEEP
ionic-frameworkionic-view
Sajith
Sajith

Reputation: 311

How do I center the logo in ionic bar

I want to center my logo in the ionic bar. how do i do it ? (It always shows at the left side) I want it like this

Centered logo screen

Here is my Ionic code :

 <ion-nav-bar class="bar bar-header bar-assertive">

        <ion-nav-back-button>
        </ion-nav-back-button>
        <ion-nav-buttons side ="Center">
        <div class="title"> <img alt="Company Logo" height="40" src="img/logo.png"></div>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
            </button>
        </ion-nav-buttons>

    </ion-nav-bar>

Upvotes: 4

Views: 9239

Answers (3)

H S W
H S W

Reputation: 7164

It can be done by using class="ion-text-center" in ion-title.

<ion-header class="ion-no-border">
  <ion-toolbar>
     <ion-button class="header-button" slot="start" fill="clear">
        <ion-icon name="person"></ion-icon>
     </ion-button>
     <ion-title class="ion-text-center">
        <ion-icon
          class="logo-icon"
          src="./assets/icon/logo.svg"
          ></ion-icon>
      </ion-title>
      <ion-button class="header-button" slot="end" fill="clear">
         <ion-icon src="./assets/icon/menu.svg"></ion-icon>
      </ion-button>
   </ion-toolbar>
</ion-header>

Upvotes: 0

Kumaresan Perumal
Kumaresan Perumal

Reputation: 1958

<ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>

     <ion-nav-buttons side="right">
         <img src="http://www.ionicframework.com/img/ionic-logo-white.svg" 
        width="123" height="43" menu-toggle="left"/>
     </ion-nav-buttons>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
      </button>
      </ion-nav-buttons>

 </ion-nav-bar>

Upvotes: 0

Eve-Amandine
Eve-Amandine

Reputation: 230

I don't know your ionic version but now you can add a ion-nav-title without doing an override with a ion-nav-button like you made. It's cleaner and works better. In addition, to make sure your title is on the center, you can add a "align-title: center" in your ion-nav-bar definition. Here is the example:

<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">  

    <ion-nav-back-button>
    </ion-nav-back-button>

    <ion-nav-title>
        <img alt="Company Logo" height="40" src="img/logo.png">
    </ion-nav-title>

    <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
    </ion-nav-buttons>

</ion-nav-bar>

Here you have the codepen link: http://codepen.io/anon/pen/RWLyMW

Upvotes: 7

Related Questions