Need help with CSS / Bootstrap order of precedence (i think)

I don’t seem to be able to get the text in the Navbar to change color or the active class to change background-color either.

Is this something to do with the order of precedence between bootstrap and my css or ???

Link to a jsfiddle with the code]

Hello,
From what I saw you are using the Bootstrap navigation classes. When you use the class “navbar-default” it comes with some style from Bootstrap. In the image attached you will see what I am referring t. You could either add more classes to your code in order to have a higher priority or you could get rid of the default navbar class.

Another thing. On the active class you’ve set the color to something you wish for, but because the li.active has an “a” nested inside it, it won’t change color. When you have an “a” as a child and you set the color to the parent, the “a” child will not inherit it unless you specify it to. You can fix this by setting the color of the active link on the “.active a”.

Hope it helps.

2 Likes

Thanks @MaddieP your answer led me to find the full path of the classes I needed to specify in my css to change the colors. I needed the full path of nested classes as opposed to just one class I was originally using.

Glad it helped. :slight_smile: