Bootstrap CSS text color not changing

Question

I'm making a website with Bootstrap, and I want to change the text color of my navbar. I was having difficulties even targeting the navbar, but that's besides the point. Basically, I just want to change the text color. It lets me change anything I want other than the text color, such as the background color, the font, the borders, etc, other than the text color. Here's a link to the GitHub of the page. Any help would be greatly appreciated (my css is in css/style.css, and the color tag is in the .nav, .navbar, .dropdown-menu class).

EDIT 1 I've updated my GitHub code but it still doesn't seem to be working.

here is the answer http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3 — Digital Legend, Dec 05 '15 at 14:36
When you are dealing with existing styles, you can use developer tools `F12` in Chrome to find out what css rules are applying to an element. Then you can find out just how specific you need to be with your selectors to override. — Eric Phillips, Dec 05 '15 at 14:42
I've updated my GitHub, but it still doesn't seem to be working. — TheAustralianBirdEatingLouse, Dec 05 '15 at 21:03

score 0 · Accepted Answer · answered Dec 05 '15 at 21:18

The line controlling font-color on nav bar currently is in bootstrap.css and reads as follows:

.navbar-default .navbar-nav > li > a { color: #777;}

Inside style.css - you have tried to change the color in a few places, mainly here:

.navbar-default, .navbar-nav > li > a, .dropdown-menu { background-color: #c8f57a; border: 0 none; color: #2d4207; font-family: "Josefin Sans",sans-serif; margin: 0; text-transform: uppercase; }

You may set precedent for your style.css rule to take priority by adding !important after the color:2d4207;. so, the new CSS in style.css would read as follows:

.navbar-default, .navbar-nav > li > a, .dropdown-menu { background-color: #c8f57a; border: 0 none; color: #2d4207 !important; font-family: "Josefin Sans",sans-serif; margin: 0; text-transform: uppercase; }

You may read up on CSS Specificity here: developer Mozilla - Specificity

Bootstrap CSS text color not changing

1 Answers1