Logo and title in header (left-center)

Gentianes · October 19, 2016, 4:07pm

Hi,

I want to be able to have a logo and a title in the header of my app. Currently, my app is organised this way :

index.html that wraps the other views :

<body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable headerBar" align-title="center">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view>
    </ion-nav-view>
</body>

And I have my tabs with ion-view. Before modifications, I had the parameter view-title for each tab, and I had a title in the center of the header, but I want to have a logo on the left, and the title on the center. So what I did was this :

<ion-nav-title>
    <img src='img/helpro.png' class="title-image"/>
    <!--
    <span class="textSpan">
        Helpro active call system
    </span>
    -->
</ion-nav-title>

But this way, I have the logo on the center, with the text in the center too, and in my index if I delete the align-title=“center”, they both go left. How can I do to have the logo on the left, and a title on the center ? I tried to have the tag nav-title and the parameter view-title, but nav-title override the view-title.

This is my current page :

Thanks !