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

ionic-v1
1

I used pre-built ionic project with side-menus: https://github.com/driftyco/ionic-starter-sidemenu

index.html has:

<body ng-app="myApp">
  <ion-nav-view></ion-nav-view>
</body>

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-nav-buttons>
  <ion-content class="has-header">
    ...
  </ion-content>
</ion-view>

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.

Thanks.

2

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.

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

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.

4

It should be before, not inside, the ionNavView

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

It still has no effet :frowning:

6

Ah there is an ionNavBar setup already in this file https://github.com/driftyco/ionic-starter-sidemenu/blob/master/templates/menu.html

Try changing the class there.

2 Likes
7

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

8

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