Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,137 Points
Katie Wood
Katie Wood
19,137 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