Overriding BS NavPill color

1

Hey everyone I’m attempting to override the blue navpill color that comes standard with the bootstrap that I’m using. Any help would be greatly appreciated

.page {
width: auto;
height: 100vh;
padding: 2%;
}

.pageOne {
background: url(“https://images.unsplash.com/photo-1486916184895-c902d4a07237?dpr=1&auto=format&fit=crop&w=1500&h=962&q=80&cs=tinysrgb&crop=&bg=”);
height: cover;
width: auto;
background-size: cover;
}

.nav {
font-family: Raleway;
font-size: 1.5em;
}

.red .active a,
.red .active a:hover {
background-color: red;
}

/fonts/
.nav>li>a.active,
.nav>li>a:hover,
.nav>li>a:focus {
background-color: #5c8a36;
}

.header {
font-size: 5em;
font-family: Abril Fatface;
color: white;
text-shadow: 2px 2px #8b795e;
}

.subtitle {
font-size: 2em;
font-family: Raleway;
color: white;
text-shadow: 2px 2px #8b795e;
}

<header>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
  <!-- Add icon library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title></title>
</header>

<main>
  <!--page one-->
  <div class="page pageOne">
    <!--navbar-->
    <nav>
      
      <ul class="nav nav-pills">
        <li>
          <a>Portfolio</a>
        </li>
        <li class="pull-right">
          <a href="#">Contact Me</a>
        </li>
        <li class="pull-right">
          <a href="#">About Me</a>
        </li>
      </ul>
    </nav>
    <!--header-->
    <div><br><br><br>
      <h1 class="header text-center">Rachel Elizabeth</h1>
      <h2 class="subtitle text-center">Web Development & Design</h3>
    </div><br><br><br>
    <div>
<!--bottom first page buttons-->
        <a class="btn btn-default" href="https:https://codepen.io/rachiscuy/">CodePen</a>
        <a class="btn btn-default" href="https://github.com/rachiscuy">GitHub</a>
        <a class="btn btn-default" href="https://www.freecodecamp.com/rachiscuy" target="_blank">freeCodeCamp</a>
    </div>
  </div>

<!--page two-->
 <div class="page">
<!--left column-->
  <div class="pull-left" style="width:40%;">
    <div>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/150x150"></a>
    </div>
    <div>
      <h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</em> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
<!--right column-->
    <div class="pull-right">
      <div>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/150x150"></a>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/150x150"></a>
      </div>
      <div>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/150x150"></a>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/150x150"></a>
      </div>
    </div>
  </div>
<!--page three-->
  <div class="page">
    <h1>Contact Me</h1>
    <div>
    <div class="container">
  <form action="/action_page.php">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">

  </form>
</div>
      </div>
    <footer>
  <div class="textCenter">
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-twitter"></a>
    <a href="#" class="fa fa-instagram"></a>
    <a href="#" class="fa fa-linkedin"></a>
  </div>
    </footer>
</main>

Windows // Chrome Browser

Link to the challenge:
https://www.freecodecamp.org/challenges/build-a-personal-portfolio-webpage

2

Hey. It should be head and not header wrapping your CSS scripts. Are you using Codepen? Because if you are, you don’t need them there anyway, you should load them in the pen settings.

Anyway, the nav pills’ background isn’t blue for me, so you are overriding them successfully. Also, when you comment your CSS use this format:

/* fonts */

If you meant the text color, then this should work just fine:

.nav>li>a {
  color:#333;
}
1 Like