App Logo In Header

Hi there,

I would like to use the logo of my app inside the header element on every single view.

So the first question is if ionic support this kind of stuff. If so, how should I pass the img tag to the view. And which dimensions you recommend to the logo, so it would look neat inside an iPhone header, or should I control the height of the logo with CSS (something like header img { max-height: 100% })

Hope anyone could help me out.

Greetings,

3 Likes

What version of Ionic are you using?

As recently as I think 0.9.25, you could do this:

<ion-view title="navTitle" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true" class="bubble-background">
$scope.navTitle='<img class="title-image" src="images/kidsintouchtext.png" />';
4 Likes

Right on!

The logo is on my header now. But now I have this problem, I was able to keep the logo height proportional to the header’s height with the CSS rule “max-height:100%”. If I test this on any browser, the logo height stays true to this configuration, but when I check this with de “cordova emulate ios”, the logo exceeds the header and invades the other content area.

So I was thinking about using a logo with the exact dimensions of a iPhone header, but I don’t know which are these dimensions, specifically the height.

Anyone knows how to fix this logo height issue? Thanks in advance,

2 Likes

Headers in Ionic have a height of 44px. So, you need to make sure the logo is sized less than that.

Here is how I forced that :

.title-image {
    margin-top: 8px;
    height: 27px;
}

Resulting in:

2 Likes

hey,
I stumbled over this discussion because we are also looking for a way to show an image inside the header element. After trying this approach and ar a short look into the ionic source code I realized that the suggested approach isn’t up to date any any more. At least since Ionic Beta4 you can set the image tag in the title attribute of the ionicView directive directly. Like
<ion-view title='<img class="title-image" src="images/kidsintouchtext.png" />'>

10 Likes

This method worked for me. Thanks!

On v1.0.0-beta.6 “darmstadtium-dingo” @schuppo method worked very well.

Thanks !

Any recommendations if you want an image always on the left side but always to the right of the left-most icon.

For instance, the Android Google Drive app header.

{icon}{image}{title} _________ {right icons}

or

[icon][image]_________[title]_________[right icons]
6 Likes

This works into Beta9

We would like to use an SVG object as a logo in the title :smile:

Works fine for png but can’t get it to work for svg.
<ion-view title=‘&lt;object class="title-image" type="image/svg+xml" data="img/OFF_header.svg" width="100%" height="100%"&gt;&lt;/object>’>

Any fix/work-around for this?

3 Likes

this one is working for me … Thanks

It’s works, but it has a bug with Back button.
On enough large screen it’ll show the logo (not correctly vertical centred) instead the classic title view string.
Have you find a solution using something similar to this?

<ion-view title="ViewTitleUsedInBackBtn">
  <div class="bar bar-header bar-light">
    <div class="title" id="logo">
      <img src="img/logo.png" />
    </div>
  </div>
  ...

I’m trying this solution, but it doesn’t work. Where am I wrong?

I’m not exactly sure the best way to implement this…Are you just putting the image tag and title text in the header? Is there a way to template the image into the header so that I don’t have to add it each time?

Well, according to here, its done as below (just remove the ng-click if you don’t want an event to be there":

*make sure its not within a div. Just read the link. All information is there :smile:

<ion-view>
    <ion-nav-buttons side="primary">
         <button class="button" ng-click="doSomething()">
              I'm a button on the primary of the navbar!
         </button>
    </ion-nav-buttons>
</ion-view>
1 Like

Hi,

This is not working for me. Any clue why? Ionic version 1.3.11

Thanks,
Utpal

Try using the “new” ion-nav-title

http://ionicframework.com/docs/api/directive/ionNavTitle/

3 Likes

Still not working

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-barbo">
<ion-nav-title>
      	<img src= "../../../images/barbotext.png">
    </ion-nav-title>
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<ion class="logo-right"></ion>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent">
</ion-nav-view>
</ion-side-menu-content>

Guys how can I define nav title once for all states by default?