App Logo In Header

ionic-v1
1

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
2
3

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
4

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
5

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
6

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
7

This method worked for me. Thanks!

8

On v1.0.0-beta.6 ā€œdarmstadtium-dingoā€ @schuppo method worked very well.

Thanks !

9

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
10

This works into Beta9

11

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

13

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
14

this one is working for me ā€¦ Thanks

15

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?

17

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?

18

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
19

Hi,

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

Thanks,
Utpal

20

Try using the ā€œnewā€ ion-nav-title

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

3 Likes
21

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>
23

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