Bootstrap navbar | changing font colour

1

Hi
I’m trying to change the font colour in a Bootstrap navbar using a custom css class navStyle

.navStyle {
color:black;
background-color:grey;
}

I’ve inserted the class in the nav class.

nav class=“navbar navbar-default navStyle”

The background colour changes to the grey but the font doesn’t change to black?
I would appreciate any help
Thanks

2

Take a look at this comment on StackOverflow

Basically, you need to make sure your style is overriding bootstrap. Let me know if there isn’t enough info there to get the issue sorted out.

2 Likes
3

hey!
In addition to previous I would also recommend using !important in cases when you are not sure your style overriding bootstrap.
Just type
color: black !important;
Sometimes it is good way when you are working with frameworks like bootstrap.

1 Like
4

Generally speaking, the use of !important makes CSS much harder to maintain.

What you want is to make sure that you styles are being defined after the bootstrap style sheet, and that your selector is at least as, or more specific than the bootstrap style.

Typically, the reason your selector is not overriding another is one of those two.

The link cjsheets posted has some good advice regarding this.

2 Likes
5

Thanks all I will have a look at my code later