Change navbar header background colour Ionic

Ionic Framework ionic-v3
1

Hi,

I want to change the colour of the navbar header in my Ionic 2 / Angular 2 app, how would i do this?

This CSS in DOM is .toolbar-background

<ion-navbar *navbar>
  <ion-title>
    Header title
  </ion-title>
</ion-navbar>

In the older version it was as simple as: -

<div class="bar bar-header bar-stable">
  <h1 class="title">bar-stable</h1>
</div>

I want to have the header blue, with a white icon on the left and a white icon on the right, across all pages?

Any ideas,

Thanks

2 Likes
2

You want .toolbar-background

.toolbar-background {
  background-color: blue;
}

Here’s a pen: http://codepen.io/anon/pen/qZVKWM

21 Likes
3

So you have to manually over-ride the global CSS rather than applying different class’s / themes like in Ionic v1?

eg: bar-balanced class etc?

In the example below how would you add white btn icons left and right?

<ion-navbar *navbar>
  <ion-title>
    Header title
  </ion-title>
</ion-navbar>

Also - the navbar - would you create this as a page directive and insert that template into all pages, rather than re-writing it on all pages?

Thanks for the reply.

Seems a lot more messing to do this compared to v1

4

Well, you could just apply your own class to the <ion-title>

Here’s the updated pen: http://codepen.io/anon/pen/qZVKWM

But if you do that you have to put it on each tab. It sounded to me like you wanted to override the default style since you wanted it everywhere.

5

Yeah ill have to override the default styling rather than add a class.

I just thought that you could add the ionic classes to the navbar and build up your navbar that way like in the older versions, in the above code example, if not ill override it. Cheers

6

It is simple now to :slight_smile:

<ion-navbar *navbar primary></ion-navbar>
<ion-navbar *navbar secondary></ion-navbar>
<ion-navbar *navbar danger></ion-navbar>

etc…

Enjoy!

4 Likes
7

Brilliant! Thank you.

How do you add icons left and right with the new setup?

8

Something like this?

<ion-navbar *navbar primary hideBackButton="true">
  <ion-buttons>
    <button>
      <ion-icon name="arrow-back"></ion-icon>
    </button>
  </ion-buttons>

  <ion-buttons end>
    <button>
      <ion-icon name="checkmark"></ion-icon>
      Save
    </button>
  </ion-buttons>
</ion-navbar>
1 Like
9

Yes :slight_smile: Thanks for your help, spot on!

10

Is it correct that you have to set the ion-navbar colour on every page now then or is there a way to add the colour variable once and have it applied to each page? I tried setting it in the app.html on the ion-nav but that doesn’t seem to work.

Thanks

11

Setting that in app.html will not work because every new screen is show over past screen and app.html is just like some wrapper.

Sorry I don’t know how could you set this color in one place.

12

Unfortunately, this no longer appears to work in the latest version of Ionic2 (as of 10/25/16 - ionic -version = 2.1.4) with the following dependencies in package.json:

"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/compiler-cli": "0.6.2",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@ionic/storage": "1.0.3",
"ionic-angular": "2.0.0-rc.1",
"ionic-native": "2.2.3",

To solve, this I had to add the following to app.scss:

.toolbar-background {
    background-color: blue;
}
1 Like
13

This work for me. In variable.scss I added the property as navbarColor: #009688

$colors: (
  primary:     #387ef5,
  secondary:   #32db64,
  danger:      #f53d3d,
  light:       #f4f4f4,
  dark:        #222,
  favorite:    #69BB7B,
  navbarColor: #009688
);

And added in my home.html at the ion-navbar element.
<ion-navbar color='navbarColor'></ion-navbar>

12 Likes
14

for me this worked
<ion-navbar navbarColor></ion-navbar>

1 Like
15

With Ionic 2 rc2 we have the following variables we can use to change the toolbar appearance:

$toolbar-background
$toolbar-border-color
$toolbar-text-color
$toolbar-active-color
$toolbar-inactive-color
10 Likes
16

Can confirm this worked for me (using RC3)

$toolbar-background: #123456;
$toolbar-border-color: #123456;
$toolbar-text-color: #123456;
$toolbar-active-color: #123456;
$toolbar-inactive-color: #123456;

Thanks! @fiznool

2 Likes
17

works for me…
<ion-navbar no-border-bottom [color]="isAndroid ? 'primary' : 'light'">

1 Like
18

Hm, doesn’t seem to work in rc4? I’ve tried setting these values directly in app.scss, but there’s no effect… e.g.:

//(some app.scss file comments above)

$toolbar-background: red;
$toolbar-text-color: orange;

Am I doing something wrong here?

Apparently, I am :slight_smile: the variables part should go into the /src/theme/variables.scss file. It works as expected.

20

It’s an simple concept so don’t get confuse on change navbar color.
following codes are helpful to you…

<ion-navbar color="primary">
   
    <ion-title>Not Delivered Details</ion-title>
    <ion-buttons end>
      
 

    </ion-buttons>
</ion-navbar>
4 Likes
21

Great work vaibsVB. Brilliant !!