# Chaning nav-bar classes on page loads

**URL:** <https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784>\
**Category:** ionic-v1\
**Created:** [February 3, 2014, 4:41pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784 "2014-02-03T16:41:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![vialware](https://avatars.discourse-cdn.com/v4/letter/v/c37758/32.png) [@vialware](https://forum.ionicframework.com/u/vialware)\
**Post date:** [February 3, 2014, 4:41pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/1 "2014-02-03T16:41:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![max](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/max/32/137761_2.png) [@max](https://forum.ionicframework.com/u/max)\
**Post date:** [February 4, 2014, 8:19pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/2 "2014-02-04T20:19:09Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![vialware](https://avatars.discourse-cdn.com/v4/letter/v/c37758/32.png) [@vialware](https://forum.ionicframework.com/u/vialware)\
**Post date:** [February 4, 2014, 8:31pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/3 "2014-02-04T20:31:49Z")

</div>

@max

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

---

<div class="post-metadata">

**Author:** ![benashman](https://avatars.discourse-cdn.com/v4/letter/b/ce73a5/32.png) [@benashman](https://forum.ionicframework.com/u/benashman)\
**Post date:** [February 11, 2014, 10:55am UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/4 "2014-02-11T10:55:46Z")

</div>

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

Thanks!

---

<div class="post-metadata">

**Author:** ![vialware](https://avatars.discourse-cdn.com/v4/letter/v/c37758/32.png) [@vialware](https://forum.ionicframework.com/u/vialware)\
**Post date:** [February 11, 2014, 7:08pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/5 "2014-02-11T19:08:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\
**Post date:** [February 11, 2014, 8:05pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/6 "2014-02-11T20:05:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [February 11, 2014, 9:01pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/7 "2014-02-11T21:01:46Z")

</div>

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";

$scope.myClass="bar-dark"

```

Would something like this work?

---

<div class="post-metadata">

**Author:** ![jough](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jough/32/7887_2.png) [@jough](https://forum.ionicframework.com/u/jough)\
**Post date:** [February 12, 2014, 7:06pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/8 "2014-02-12T19:06:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\
**Post date:** [February 13, 2014, 6:25pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/9 "2014-02-13T18:25:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jough](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jough/32/7887_2.png) [@jough](https://forum.ionicframework.com/u/jough)\
**Post date:** [February 13, 2014, 7:53pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/10 "2014-02-13T19:53:30Z")

</div>

Done: [https://github.com/driftyco/ionic/issues/599](https://github.com/driftyco/ionic/issues/599)

---

<div class="post-metadata">

**Author:** ![scoutlit](https://avatars.discourse-cdn.com/v4/letter/s/e0b2c6/32.png) [@scoutlit](https://forum.ionicframework.com/u/scoutlit)\
**Post date:** [March 1, 2014, 9:48pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/11 "2014-03-01T21:48:31Z")

</div>

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}}" 
         animation="nav-title-slide-ios7" 
         back-button-type="button-icon" 
         back-button-icon="ion-ios7-arrow-back"></nav-bar>

```

And here’s my scope controller code:

```
$scope.myType = "bar-assertive";
```

---

<div class="post-metadata">

**Author:** ![jazzfanatic](https://avatars.discourse-cdn.com/v4/letter/j/b9bd4f/32.png) [@jazzfanatic](https://forum.ionicframework.com/u/jazzfanatic)\
**Post date:** [March 13, 2014, 5:50am UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/12 "2014-03-13T05:50:23Z")

</div>

You need to to do it from $rootScope

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [March 13, 2014, 1:23pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/13 "2014-03-13T13:23:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![scoutlit](https://avatars.discourse-cdn.com/v4/letter/s/e0b2c6/32.png) [@scoutlit](https://forum.ionicframework.com/u/scoutlit)\
**Post date:** [March 15, 2014, 1:23pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/14 "2014-03-15T13:23:56Z")

</div>

Ok great, thank you @jazzfanatic and @Calendee!

---

<div class="post-metadata">

**Author:** ![ajbraus](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ajbraus/32/63991_2.png) [@ajbraus](https://forum.ionicframework.com/u/ajbraus)\
**Post date:** [April 25, 2014, 4:49am UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/15 "2014-04-25T04:49:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![scoutlit](https://avatars.discourse-cdn.com/v4/letter/s/e0b2c6/32.png) [@scoutlit](https://forum.ionicframework.com/u/scoutlit)\
**Post date:** [April 26, 2014, 9:35am UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/16 "2014-04-26T09:35:05Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jmsv23](https://avatars.discourse-cdn.com/v4/letter/j/57b2e6/32.png) [@jmsv23](https://forum.ionicframework.com/u/jmsv23)\
**Post date:** [May 6, 2014, 11:48pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/17 "2014-05-06T23:48:53Z")

</div>

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) {
                barra.removeClass('bar-seccion-general');
				barra.addClass(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

---

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [May 7, 2014, 12:38am UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/18 "2014-05-07T00:38:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mattrosno](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mattrosno/32/8256_2.png) [@mattrosno](https://forum.ionicframework.com/u/mattrosno)\
**Post date:** [January 12, 2015, 12:42am UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/19 "2015-01-12T00:42:16Z")

</div>

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.

```auto
<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center" ng-class="{'rp-bar-stable':lightNavBar}">
    <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>

```

```auto
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { 
    if (_.indexOf(['state1', 'state2', 'state3'], toState.name) != -1) {
        $rootScope.lightNavBar = true;
    } else {
        $rootScope.lightNavBar = false;
    }
});

```

---

<div class="post-metadata">

**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\
**Post date:** [January 12, 2015, 9:56am UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/20 "2015-01-12T09:56:23Z")

</div>

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?

[Next page](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784.md?page=2)