Styling ion-header-bar directive

Changing style of CSS Header is very clear:

Is it possible to do same thing with ion-header-bar directive? I looked at but don’t see anything here about changing the style.


You can add your own class right to the directive.

This works great as this is the direction that the ionic guys are planning on moving it with 1.0

Note: I’m using important flags in the codepen because codepen applies your own css before it applies any your include.

There is a bit of a problem here though because you can’t seem to use the ion-header-bar and ion-nav-bar both. And it is not possible to style the ion-nav-bar based on different states.

@ajbraus I was going to point you to this post

But it appears you already got there :smile: i’ll ping the devs and see if this is still possible, I never played with it too much

So you can change the class of the nav-bar by using ng-class on it.

<ion-nav-bar ng-class="myclass">

Then in a run function, set up your root scope

angular.module('ionicApp', ['ionic'])

  .run(function($rootScope) {
     $rootScope.myclass =  "bar-royal"

Worked great! Thanks!

I only had three screens with a different bar so I used a conditional and then set the $rootScope.barClass in each of the three controllers:

ng-class="(barClass) ? barClass : 'bar-positive'"

I also had to set the $rootScope.barClass on the other tabs and root nodes of my navigation because otherwise after the class was set it didn’t fall back to nil because rootScope carries between contexts.