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

ionic-v1
1

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();">

            </button>

        </ion-nav-buttons>
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
    </ion-nav-bar>
    <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.

Thanks.

2

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

3

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?

4

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-header-bar>
    <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>
            </div>

        </div>
    </ion-content>
</ion-view>

M.