How to change nav bar color with nav-bar HTML element?


I used pre-built ionic project with side-menus:

index.html has:

<body ng-app="myApp">

Each page is built like this:

<ion-view title="My Title">

  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  <ion-content class="has-header">

How am I supposed to do to change nav bar background color since there is no nav-bar HTML attribute?
If I can do it using SASS, it’s better.



If there is no <ion-nav-bar> in your index.html, go ahead and add it. Then you can apply the bar-color classes to modify the design.

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

I tried that, it has no effect. Actually at the loading I can see a red header bar, but the bar go back to default grey as soon as everything is loaded.


It should be before, not inside, the ionNavView

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


It still has no effet :frowning:


Ah there is an ionNavBar setup already in this file

Try changing the class there.


Yessss!! Finally found the right place :slight_smile: Thanks a lot !


After 1 hour of googling I landed here and finally I got what I want.