Custom header title in nav bar

ionic-v1
1

I am using ionic nav view. I want to use custom headers in the ion-nav-bar on each ion-view. Is there any way to customize the title with css or i have to use a image

2

I think I understand what you want, but to be sure, can you give me an example?

3

I want to customize the title in ion-view tag like this for e.g.

<ion-view title="<span> my</span> <span style='color:#0088cc'> Product</span>">

Things in span are showing but css is not applying. Is there a way to do this or i have to use a image.

4

Try this. Create a css file and add this to change color of the header

.bar.bar-positive {
border-color: #2C3E50;
background-color: #2C3E50;
background-image: none;
}

5

@romanrast: That’s not what i need this will change the color of the header bar . I want to customize (apply css) the title that is inserted in the <ion-nav-bar> from <ion-view>

6

You can define the custom class in your css then add this to your controller.

  $scope.$root.cls = "my-awesome-header"

  <ion-nav-bar ng-class="$root.cls">
            <ion-nav-back-button class="button-icon ion-arrow-left-c">
            </ion-nav-back-button>
  </ion-nav-bar>
1 Like