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?
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?
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 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; } }
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.