# 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:** 5\
**Page:** 2

<div class="post-metadata">

**Author:** ![mitch42](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mitch42/32/123124_2.png) [@mitch42](https://forum.ionicframework.com/u/mitch42)\
**Post date:** [February 17, 2015, 2:58pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/21 "2015-02-17T14:58:13Z")

</div>

There is actually a bug referenced for this. [https://github.com/driftyco/ionic/issues/2732](https://github.com/driftyco/ionic/issues/2732) It seems to be a beta14 bug according to the comments on this issue.

For those looking for a workaround until it’s fixed, you can achieve this by adding or removing manually the class from the ion-nav-bar element:

```
var element = angular.element(document.querySelector('ion-nav-bar'));
element.addClass('your-class');

```

If you want to change the class when changing views, you can listen to the event `$stateChangeStart` on the rootScope:

```
        $rootScope.$on('$stateChangeStart',
        (event, toState, toParams, fromState: any, fromParams): void => {
            // change class here
        });

```

Hope this helps

---

<div class="post-metadata">

**Author:** ![niravf22](https://avatars.discourse-cdn.com/v4/letter/n/ecd19e/32.png) [@niravf22](https://forum.ionicframework.com/u/niravf22)\
**Post date:** [July 21, 2015, 10:32am UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/22 "2015-07-21T10:32:37Z")

</div>

I wasted many hours trying to make it work using ng-class. But its an exisiting issue which will be taken care in next big release.

As an alternative for now, you can just redeclare ion-navbar (with your custom class) html block in your view to overide the layout ion-navbar.

Hope it helps.

---

<div class="post-metadata">

**Author:** ![lazamar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lazamar/32/91137_2.png) [@lazamar](https://forum.ionicframework.com/u/lazamar)\
**Post date:** [September 11, 2015, 9:18am UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/23 "2015-09-11T09:18:04Z")

</div>

This here works like a charm:

1 . Create a main controller to take care of your index page and all views within it.  
2. Add this function to the controller:

```auto
$scope.setNavColor = function(color){
    for(var i =0; i < document.getElementsByTagName("ion-header-bar").length; i++){
      classNames = document.getElementsByTagName("ion-header-bar")[i].className;
      classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color );
      document.getElementsByTagName("ion-header-bar")[i].className = classNames;
    }
  }

```

3 . add `on-select` to your ion-tab tab so it will call the function whenever your tab is chosen:  
`<ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>`

4 . add `on-deselect` to you `ion-tab` too if you want the color to go back to some value when you leave.

5 . Have fun!

---

<div class="post-metadata">

**Author:** ![lalolanda](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@lalolanda](https://forum.ionicframework.com/u/lalolanda)\
**Post date:** [November 28, 2016, 10:49pm UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/24 "2016-11-28T22:49:34Z")

</div>

this solve the fucking issue for me, ng-class not working with ion-nav-bar, i been strugle with this for a while

---

<div class="post-metadata">

**Author:** ![trivector\_leif](https://avatars.discourse-cdn.com/v4/letter/t/ecccb3/32.png) [@trivector\_leif](https://forum.ionicframework.com/u/trivector_leif)\
**Post date:** [May 3, 2019, 11:25am UTC](https://forum.ionicframework.com/t/chaning-nav-bar-classes-on-page-loads/784/25 "2019-05-03T11:25:30Z")

</div>

For me it works to set ng-class on ion-nav-bar. I don’t use root scope but instead a variable on the controller scope on the menu/tab controller. Using root scope should work too though I think, but I haven’t tried it.

Controller:

```auto
	$scope.$on('$ionicView.beforeEnter', function() {
		$scope.nav_class = 'state-' + $state.current.name.replace('.', '-');
	});

```

Template:

```auto
	<ion-nav-bar class="bar-company" ng-class="nav_class">

```

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