Ion-nav-bar color



How do i change the color of the <ion-nav-bar>?

i want to change it to a white color (without the bottom border/nav bar outline), but am unable to, with CSS.

Is it possible to change it, or are we out of other options?


ion-nav-bar uses .bar and .bar-positive to define those properties, add a class to your ion-nav-bar that overrides the style properties**.

Can you provide the css you were using to override the colour before?

** .bar-positive applies the positive colour you could use any of the Ionic -<colour> options.


This is what i tried:

<ion-nav-bar style="background-color: white; border-bottom: none"></ion-nav-bar>

What is this colour option?


Ok, problem with your css is you are applying a style to the directive html element ion-nav-bar the directive generates html with the following markup:




Or similar, the div inside the ion-nav-bar is what you need to set the background colour to, not the ion-nav-bar element.

Here’s more info about bar colour styles

You should add a class to your ion-nav-bar and do the following:

.my-custom-bar { .bar-header { background: white; } }


Thanks for the hint!
I got this working:

  .custom-class {
            background-color: white;
            border: none;

However, using the .bar-header within, does not seem to work.


Nesting the bar-header class inside of the custom-class is a feature of Sass. If you are using plain CSS it would look like this:

.custom-class .bar-header {
    background-color: white;
    border: none;

This will completely remove the border, but you may still see it on an iOS device. In that case add background-image: none; to your class.


Thanks for the hint.


Sorry @brandyshea is right, it’s a feature of Sass, I shouldn’t of presumed you’d of known the syntax.