htmlcsstwitter-bootstraptext-coloring

Bootstrap CSS text color not changing


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.


Solution

  • 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