Best Bite Step 1


#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








<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;
}
}


#2

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.


#3

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


#4

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.


#5

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;