Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Andrew O'Reilly
Andrew O'Reilly
3,350 Points

Blue text in bootstrap NavItem

HI guys just an issue im having with bootstrap { finished the bootstrap section) the nav text is blue and i cannot change it in css i have used the body and * selectors to change color: but it stays blue :( here is my code below

<div class="container-fluid"> <div class="header clearfix"> <!--Nav-bar section --> <nav class="navbar navbar-dark bg-dark"> <ul class="nav float-right"> <li class="nav-item"> <a class="nav-link active" href="#">About me <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul>

    <h3 class="my-name">Andrew O'Reilly || Web Developer </h3>
      </nav>
  </div> <!-- ENd of Nav bar -->
Andrei Duhanes
Andrei Duhanes
14,155 Points
Andrei Duhanes
Andrei Duhanes
14,155 Points

Try 2 methods:

  1. Give an ID to the element and set the color:red to that #id // 2.Take the selector and give it { color: red !important }

1 Answer

Katie Wood
Katie Wood
19,141 Points
Katie Wood
Katie Wood
19,141 Points

Hi there,

My best guess without having your CSS code is that the selectors just weren't specific enough to override whatever Bootstrap has them set at. When overriding a default style, you want to be as specific as possible so that your CSS rule will take precedence - have you tried targeting the .nav-link class?

For reference, there's a lot more detail on cascading styles and which take precedence here