So for my portfolio, Im stuck on trying to customize my nav-pills. I want to change the hover color but it won’t change. I used a background-color tag but it did not work. I can change the color of the font but not the color of the square hover bar. Check out my code:
The CSS you should apply is:
#banner {
background-color: green;
}
I found that with the Chrome Developer Tools page inspector by the way so if you wanna find the correct CSS class to apply to. Let us know if you have further questions.
1 Like
Try this:
ul.nav a:hover {
background-color: mistyrose !important;
}
1 Like
Omg, thank you so much I was frustrated for a whole entire day about this! I see a lot of code with periods between the elements yet I’m unsure how to use them and I don’t know how to search to find out how it works. The code camp didn’t really have a lesson on it unless it went over my head. IDK how you figure out the system in which to change certain components of the page
The periods mean classes, so ul.nav a:hover means “ul” element with class “nav”, and within that, “a” element. The colon prefixes the hover keyword so that when the user mouses over, it changes color per the CSS.
now I’m trying to change the active button from blue to red I put
" li.active a{
background-color:red;
} "
but it is not working, what am I doing wrong
It make be a better idea to add a class to the link and apply CSS to the class rather than the link itself, it’ll make your code more manageable. Just a thought which might make it easier for you and could potentially solve the issue.
I’ve added a class and tried still no avail 
I just attempted to style it and wasn’t able to quickly find a solution, I’m looking into it for you.