[SOLVED] Change color of default nav-bar without losing navigation controls

Change color of default nav-bar without losing navigation controls

<ion-view view-title="Title">
  <ion-content>
  Content Here
  </ion-content>
</ion-view>

The above code gives me the default view of ionic I need to change the color of header keeping the default navigation controllers (like menu/back icon) instead of defining a new header bar as below.

<ion-view view-title="Title">
  <ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>

<ion-content>
 Content Here
</ion-content>
</ion-view>

Is there a clean way to slove the problem?

Solution

Just make any css class

.your-sample-class{
  background: #color-code !important
}

And add this class to nav bar of your project this way:

<ion-nav-bar class="bar your-sample-class" ></ion-nav-bar>