title: How to change ion-header color
body: <p>I am developing ionic application and have strange behaviour.</p>
  
  <pre><code>&lt;ion-nav-bar class="bar-calm nav-title-slide-ios7"&gt;
              &lt;ion-nav-back-button ng-click="clickMe()" class="button-clear"&gt;&lt;i class="icon ion-ios7-arrow-back"&gt;&lt;/i&gt; Back &lt;/ion-nav-back-button&gt;
          &lt;/ion-nav-bar&gt;
  </code></pre>
  
  <p>I am planning to have custom background header color. So I changed the code to </p>
  
  <pre><code>&lt;ion-nav-bar class="bar-calm nav-title-slide-ios7" ng-style="HeaderColor"&gt;
              &lt;ion-nav-back-button ng-click="clickMe()" class="button-clear"&gt;&lt;i class="icon ion-ios7-arrow-back"&gt;&lt;/i&gt; Back &lt;/ion-nav-back-button&gt;
          &lt;/ion-nav-bar&gt;
  </code></pre>
  
  <p>Here HeaderColor attribute has an style defined for background color.
  Also added - </p>
  
  <pre><code>.nav-bar-block .bar {
      background-color:inherit !important;
  }
  </code></pre>
  
  <p>Now, I am able to see background color property applied to nav-bar but header is transparent and shows the color of ion-view but not the header.
  Example : If my ion-view is green and header is black -- screen displayed is fully green including header. </p>