Custom content in ion-nav-bar no longer included


#1

I had been including img and span elements inside my ion-nav-bar but in the latest beta the contents is not included in the final html. Is there a better method for including images and taglines in the header?


#2

Do you mind posting a sample of your header? I know there have been a lot of changes in how the header is structured.


#3

Sure thing. This is the structure I had been using:

<ion-nav-bar class="bar-dark nav-title-slide-ios7" align-title="right">
  <ion-nav-back-button class="button-icon ion-arrow-left-c">
    Back
  </ion-nav-back-button>
    <img src="img/logo-color.png" id="navbar-logo"/>
  <span id="tagline" class="stable">Something witty goes here</span>
</ion-nav-bar>

I can get around it easily enough but I didn’t see that change mentioned in the change log.


#4

Hi !

You should definitely use ion-header-bar instead of ion-nav-bar in this case.
Let me know if you need more help about that.

Hakan.


#5

As @hakan_ebabil mentioned, you should definitely use a ion-header-bar instead of the nav-bar. I got it to work here but had to but some extra css for some reason.

<ion-header-bar class="bar-positive">
      
      <span class="title">
      <img src="http://placehold.it/350x150">
      </span>

    </ion-header-bar>

.title{
  left: 0 !important ;
  right: 0 !important;
}