Header bar white in device but colored (ok) in browser


Hi all, I have a problem with this code in the header bar section:

<ion-view class="toursList" title="Our tours">
    <ion-nav-bar class="bar-positive">
        <ion-nav-buttons side="right">
            <button class="icon button-clear ion-navicon-round" ng-click="toggleLeft();">


        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> Back
    <ion-content class="has-header">........

In the browser I see this (and it’s correct I think):

but in the device I have this:

Why my header is white in the real device ? I’m using a Nexus 5 kitkat.

If I click on the image I load a detail card of that location and in the left corner I can see “< Back”, but my header remain white.



I have the same problem with tabs in browser they are colore but not in device. Any ideas?


Hmm, can you inspect the device with chrome and see what class is being applied to the nav-bar?
Also, what version of ionic are you using?


Hi, I have resolved with this code in my html view file (this is from home.html):

<ion-view hide-nav-bar="true">
    <ion-header-bar class="bar-positive item-input-inset" >
        <h1 class="title">Home</h1>
    <ion-content class="">
        <div id="home">
            <img src="img/home/costa-locride.jpg">
            <div id="intro">
                    <h3>L'Italia che non ti aspetti</h3>
                    <h4>Soggiorni ed esperienze in luoghi</h4>
                <h4> da riscoprire</h4>