Best Bite Step 1

I have followed all of the steps in step 1 and have done pretty well. My first pill, “About” is labeled active and when I hover over it, it becomes blue. How do I make the “About” pill stagnant and red. I want it to be exactly like the example. I am not even sure where the blue color is generating from.

I still want the other two buttons to be effected when I hover and turn red. Just like the example.

Example: https://s3.amazonaws.com/codecademy-content/projects/bestbite/index.html

Code HTML

<!doctype html>

<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1> Bestbite </h1>
      </div>
      <div class="col-md-6">
        <ul class= "nav nav-pills">
          <li class="active"> <a href="www.google.com"> ABOUT </a> </li>
          <li> <a href="#"> SIGN UP </a> </li>
          <li> <a href="#"> LOG IN </a> </li>
        </ul>
      </div>
			</div>
  </div>
</div>            
  
<div class="jumbotron">
  <div class="container">

  </div>
</div>

<div class="section banner">
  <div class="container">
    <h3>Always have the answer to "What's for dinner?"</h3>
  </div>
</div>

<div class="section">
  <div class="container">
  	<div class="page-header">
  	  <h3>Newest Contributions</h3>
  	</div>
    
  </div>
</div>

<div class="footer">
  <div class="container">
    
  </div>
</div>

CODE CSS

html, body {
margin: 0;
padding: 0;
font-family: ‘Arvo’, serif;
font-size: 16px;
}

.container {
max-width: 940px;
margin: 0 auto;
}

/* Header */

.nav-pills li a {
color: #d8192f;
border: 1px solid red;
}

.nav-pills li.active a,
.nav-pills li a:hover,
.section .btn:hover {
background-color:rgba(216,25,47,1);
box-shadow:0 2px 4px rgba(0,0,0,.5);
color:#fff;

}

/* Jumbotron */
.jumbotron {
height: 500px;
}

/* Banner */
.banner, .supporting {
text-align: center;
padding-top: 40px;
}

.banner {
background-color:#36343f;
height:180px;
color: #fff;
}

/* Media Queries */
@media (max-width: 680px) {
.header h1 {
margin-bottom: 20px;
text-align: center;
}
.nav {
float: none;
margin: 0 auto;
}
.banner {
height: 220px;
}

.nav-pills li:first-child a {
margin-left: 0;
}
}

It is the .active class in the Bootstrap.css file. Clicking the link changes it to blue. Click anywhere else and it will revert to red.

Thank you. How do you make it permanently red for just that pill? Similar to the example template?

Just set the class to active in the html. Remember, apart from the ‘active’ class in Bootstrap, there is the pseudo-class, :active which is triggering the blue.

1 Like

Unfortunately, this thread didn’t help me. An advisor helped me get a resolution so I want to post it here for anyone else running into this problem. She said "so this is happening because .active:hover is a class in bootstrap that applies a blue background on hover, to make it the same on hover you would want to add this selector to line 24 of your css:
.nav-pills li.active a:hover "

So, in my case at least, I actually had to add another line of CSS altogether, as such (then it worked perfectly):

.nav-pills li.active a,
.nav-pills li.active a:hover,
.nav-pills li a:hover,
.section .btn:hover {
background-color:rgba(216,25,47,1);
box-shadow:0 2px 4px rgba(0,0,0,.5);
color:#fff;

1 Like