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

CSS

Posted by Phil White
Phil White
Courses Plus Student 9,519 Points

How do i change nav links color when using boot strap?

Hi,

I'm making a site using boot strap and i cant work out how to change the color of the links in my nav bar? it stays the default blue what ever i do. im using nav-pills...

5 Answers

Hugo Paz
Hugo Paz
15,622 Points

bootstrap link color can be overridden just by using 

a{color:whatYouWant;}

if you want to change the pill color you need to target this

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{
background-color:yourBgColor;
color:yourLinkColor;
}
Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

You need to overwrite it with your custom css. Just remember specificity and including your css after bootstrap.

Phil White
Phil White
Courses Plus Student 9,519 Points

Hi Hugo,

Yeah I've been trying to do that but whatever i try it doesn't work... What should i use to overwrite it?

Gemma Weirs
Gemma Weirs
15,054 Points
Gemma Weirs
Gemma Weirs
15,054 Points

What are you writing your custom CSS in? Are you using a separate stylesheet?

Phil White
Phil White
Courses Plus Student 9,519 Points

yeah a style.css

Gemma Weirs
Gemma Weirs
15,054 Points
Gemma Weirs
Gemma Weirs
15,054 Points

It'll help if you post the code you've written.

Phil White
Phil White
Courses Plus Student 9,519 Points

Here you go

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pixel Sky | Web Design</title>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>



    <ul class="navbar navbar-default navbar-fixed-top nav nav-pills">
        <img class="logo" src="css/img/Pixel-sky.png" height="230px" width="230px" alt="Pixel Sky">
        <li class="active home"><a href="index.html">Home</a></li>
        <li class="portfolio"><a href="#">Portfolio</a></li>
        <li class="about"><a href="#">About</a></li>
        <li class="contact"><a href="#">Contact</a></li>
    </ul>

    <p></p>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>
Phil White
Phil White
Courses Plus Student 9,519 Points 
.logo{
    float: left;
    margin-top: 10px;
}

li {
    margin-left: 600px;
    margin-top: 95px;
}


p {
    margin-top: 300px;
}
Phil White
PLUS
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

Thank you Hugo Paz ! it worked. Just wondering what the reason you use > signs is as i have never come across them?

Hugo Paz
Hugo Paz
15,622 Points

Its a child combinator selector. check this example:

ul > li { margin: 0 0 5px 0; }

This means it will only select list items that are direct children of an unordered list. In otherwords, it only looks one level down the markup structure, no deeper. So if there was another unordered list nested deeper, the list item children of it will not be targeted by this selector.

Phil White
Phil White
Courses Plus Student 9,519 Points

oh i see okay thanks