Chaning nav-bar classes on page loads


Is it possible to change the nav-bar class names when different pages are loaded?

Styling ion-header-bar directive

Hey @vialware, I’m not sure what you mean. Can you you give an example or more info on what you are looking to do?



for example on route1 the nav-bar class is bar-clear.
on route2 i’d like it to be bar-assertive.

here is my default setup in index.html

<nav-bar animation="nav-title-slide-ios7" type="bar-clear" back-button-type="button-icon" back-button-icon="ion-ios7-arrow-left"></nav-bar>

I was wondering if there was the ability to change the type depending on the route?

I hope i’m explaining my self better


Did you ever figure this out? I want to do exactly this, too.



@benashman unfortunately the only way I was able to solve this was using jquery.


Did you try using ng-class and exposes $location.path() on the scope?


Could you try and set it up like you would the left and right buttons? Give it a type that you could change in your controllers.

<nav-bar type="myClass"></nav-bar>

Then somewhere in your controllers

$scope.myClass= "bar-positive";


Would something like this work?


It wouldn’t because Ionic will just replace the header class with “myClass” instead of binding it to an Angular scope variable.

If the type attribute accepted an angular expression rather than a string it may be possible, but for now I think you’d need a custom directive.

Devs, please feel free to correct me if I’m wrong, as I want to change the header color depending on which tab/controller is in view as well.


Can you open an issue for this? Sounds like a good feature.

FIXED: Proper way to extend Ionic? (Disable Side menu)



I was just trying to do this and was excited to see this issue was resolved - what’s the syntax to get it working?

EDIT: I just saw this syntax on GitHub

<nav-bar type="{{myType}}">

However, when I put that in my index.html file and defined the myType variable within the scope for the controller on the page I wanted to set the color, it didn’t work and is showing up gray. Here’s my index code:

<nav-bar type="{{myType}}" 

And here’s my scope controller code:

$scope.myType = "bar-assertive";


You need to to do it from $rootScope


That or if you are using a overall “main” controller, you can defined it there.


Ok great, thank you @jazzfanatic and @Calendee!


This doesn’t seem to work any more :o(

<ion-nav-bar type="{{headerBarClass}}" class="nav-title-slide-ios7"></ion-nav-bar>
$rootScope.headerBarClass = 'bar-clear';

no dice


Yeah - even just manually setting type="bar-assertive" for example, doesn’t work. Any advice on how to change nav bar colors for different pages in the current version?


after several hours with no solutions i created a directive to change the class, first add an id to the <ion-nav-bar> then write this

.directive('changeClass', function(){
return {
	restrict: 'E',
	scope: {
		cat: '='
	link: function(scope, elem, attr) {
		var barra = angular.element(document.getElementById('barra-nota'));
		scope.$watch('cat', function(newValue, oldValue) {
            if (newValue) {
        }, true);


then call the directive from my view

<ion-view><change-class cat="categoria"></change-class></ion-view>

“categoria” is a variable in my controller like $scope.categoria

i know that is not the best approach but is the only solution that work for me, i hope it work for someone else


If you don’t want to use a custom directive you can use:

<ion-nav-bar class="nav-title-slide-ios7" ng-class="$root.cls">

And then set the class you want from your controller:

.controller('YourCtrl', function($rootScope, $scope, $stateParams){
      $scope.$root.cls = "bar-assertive";

This way you can set a different class per state. Or change the class within a state.


Instead of setting a root scope variable in every controller (for when you don’t want the alternate color), I used the $stateChangeStart event. This works well for my few states that require a lighter nav bar.

<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center" ng-class="{'rp-bar-stable':lightNavBar}">
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { 
    if (_.indexOf(['state1', 'state2', 'state3'], != -1) {
        $rootScope.lightNavBar = true;
    } else {
        $rootScope.lightNavBar = false;


Hey @mattrosno, this doesn’t seem to work when you use a nav-bar element within a sidemenu based project. The rootscope variable does change, but the nav-bar directive doesn’t pick up on the rootScope variable. Any idea how this can be fixed?