Changing nav-bar color from one view to another by setting a class

Hey there,

I would like to change the color of the ion-nav-bar to a different color depending on the state of the app.

I considered using a scope variable in the class, like: <ion-nav-bar class="bar-positive nav-title-slide-ios7 {{NavBarColor}}"> and passing a variable from the controller, but since ion-nav-bar is in index.html and not a partial, it won’t register. Anybody know of a way around this?


Have you tried looking into ng-class?

look at: this stackoverflow question and angular ng-class docs.

Try this:
In your html files:

<ion-nav-bar ng-class="{' bar-dark' : barColor == 'dark'}">...</ion-nav-bar>

In the respective controller:

$scope.barColor = 'dark';

Hey @pbernasconi, thanks. Unfortunately this means I have to tie a separate controller to ion-nav-bar since ion-nav-bar is in index.html and not in a partial. I’m looking for a way to set the color of the nav bar on a per state basis. Do you know of a way to do that?

I’m checking with the Ionic devs on this. See what kind of ideas we can come up with. I’m thinking it might be good to have $ionicNavBarDelegate have a public method to change the bar color.

@calendee That’d be amazing.

Andy to the rescue. I never knew about this method:

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

Then, in each controller :

$scope.$root.cls = "bar-assertive"

Fantastic! Going to check this out tomorrow.

Hey. This method stopped working for me after beta 14. Anybody know why or how to fix it?

Hi! This doesn’t work anymore on Beta14. Is there a workaround please?

As a work around, you can declare an “ion-nav-bar” directive in each of your views as per the “Alternate Usage” section of:

Using the sidemenu template as an example:

  • in menu.html remove the “ion-nav-bar” directive

  • in playlists.html add a “ion-nav-bar” directive after the “ion-view” directive (and before the “ion-content” directive):

      <ion-nav-buttons side="left">
          <button class="button button-clear button-icon ion-navicon" 

in playlist.html add a “ion-nav-bar” directive after the “ion-view” directive (and before the “ion-content” directive):

<ion-nav-bar class="bar-energized">
    <ion-nav-back-button class="button button-clear">
        <i class="ion-chevron-left"></i> Back

copying ion-nav-bar into all your views is not DRY, but it works. i wish you could set the class through ion-view in a similar manner as view-title.

<ion-view view-title="Keep Calm" navbar-class="bar-calm"> ... </ion-view>
1 Like

Placing an ion-nav-bar in each view does work but causes some nasty flashing on view transitions in beta 14. Any other solutions to this issue?

+1 Also having this. Any better work arounds?

I created a directive and used the states names as part of a class. Then on the styles, the background is applied to the bar using those custom classes based on the states.

Idea in action
1 Like

Love it. You could use it to pick up variables set in your router, or from your controller as well. Thanks @joseadrian!

I’ve tried the code on side-menu, but it doesn’t seem to change the colours. Have anyone tried?

@joseadrian This method doesn’t work with default ionic’s class.

I need just one state with “bar-clear”, all of other states are ‘assertive’ theme.

By the way, thanks for your help.