Ion-nav-bar color

1

Hi,

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?

2

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.

1 Like
3

This is what i tried:

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

What is this colour option?

4

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:

`

bar-light

`

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 http://ionicframework.com/docs/components/#header

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

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

1 Like
5

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.

6

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.

1 Like
7

Thanks for the hint.

8

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