Change header (or nav bar) color on sidemenu demo

Hi everyone!

I’m newbie on Ionic an have some trouble understanding the “ready-made” app demos. I’m using the “sidemenu” template to build my new app. I has a really nice looking headers on “Playlists” and “playlist” templates, also has the autohide “back” button when I move to a different state. It’s a nice and basic app to start.

My problem is that I can’t find anywhere in the code how to change the Header (or nav bar) color to “bar-positive”. I don’t even know if the bar is a “header” or “nav-bar”. what is the correct way to do this?

Thanks in advance!

There are two ways, using the pre-defined classes:

Or changing the sass file and creating your own theme.

If you are using the <ion-header-bar> you can add a class attribute using the same classes found here The classes .bar and .bar-header are already applied by the ionNavBar or ionHeaderBar directives.

<ion-header-bar class="bar-balanced">
<ion-nav-bar class="bar-calm">

Thanks. the templates don’t use the <ion-header-bar>, or at least I couldn’t find where they use it. The Playlists.html template look like this:

<ion-view title="Playlists">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  <ion-content class="has-header">
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{}}">

This is the playlist.html template:

<ion-view title="Playlist">
  <ion-content class="has-header">

Neither has an explicit header or navigation bar on them, so, I don’t know how to change to “calm” or “positive”. How can i do that?

Thank you so much!

I found how to change it! the <ion-nav-bar> and <header> were in menu.html. I simply change the “bar-stable” to “bar-positive” in both directives and works perfectly!


1 Like

I found how to do that …

go to menu.html page in the project and change the class of directive to class you like - bar-calm for example


I changed it by going to index.html and changing the bar-calm to assertive or whatever color you wish.

  <ion-nav-bar class="bar-assertive">