Button color won't change

#1

https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_bestbite?link_content_target=interstitial_project

I'm unable to match the colors of the header buttons from the completed site.

I know it acknowledges the ".nav-pills" class because it is giving me the correct font/border color, but it won't change color when I hover over it or keep the "About" button red.

It's not a huge deal, but I want to actually get every aspect of this project.

Thanks for your help!

<html>
  <head>...</head>
  <body>
     <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 nav-justified">
                    <li><a href="#" class="Active">About</a></li>
                    <li><a href="#">Sign Up</a></li>
                    <li><a href="#">Log In</a></li>
              </ul>
           </div>
        </div>
      </div>
    </div>   

<!--In my actual code, I have actual links, but for the sake of simplicity I used "#" here. I've also verified that tags are properly closed, no error messages and that everything sits in the div it's supposed to.-->     

.nav-pills li a {
  color: #d8192f;
}

.nav-pills li a {
      color: #d8192f;
      border: 1px solid #d8192f;
      margin-left: 10px;
      text-align: center;
      width: 100px;
}

.nav-pills li.active a {
      background-color: #d8192f;
      color: #ffffff;
}

.nav-pills a:hover {
      background-color: #d8192f;
      color: #fffff;
}
#2

hi atxeric,

There are some minor issues in your pasted code. 

Your css says: "find <li> element with class 'active'  and style it's child element <a> with specified styles".
But there are no <li> elements with class 'active' in your html.

In your case it would be something like this:

.nav-pills li a.Active {
      background-color: #d8192f;
      color: #ffffff;
}
#3

Ah, so because I attached the "Active" class to the "a" and not the "li" it got confused.

I took that a step further and added "li" to my hover selector and that fixed the other issue as well.

Thanks Sauliusp!

#4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.