Can't change the color of my font?

Hey guys, I can’t seem to change the color of my font to any color in my Bootstrap nav-pills tag, could someone help out?

HTML:

  • Andrew
  • CSS:

    .nav-pills {
    font-size: 2em;
    opacity: 1.0;
    font-family: Lora;
    color: white;

    }

    Any help would be really appreciated!! :slight_smile:

Hi, if you change your css code to .nav-pills a {
font-size: 2em;
opacity: 1.0;
font-family: Lora;
color: white;

}
It should work since it is the color of the font of the anchor tags that you want to change. Hope that helps.

Thanks, that’s great…

Does it mean all anchor tags now will have color: white then? Guess I could use ID’s to make that different color?

On the same note, how do I make the hover background not white then? I tried .nav-pills a:hover { color: white } but that didn’t seem to work?

Thanks again

No problem. All of the anchor tags that have the class nav-pills will be white. To change the background color, you should use the property background-color instead of color. I don’t see any CSS for the current hover style, but I see the the background changes to white when I hover over the links - how is this?

Background-color has the permanent background whereas I want to make sure the hover background changes to some other color that’s not white as it’s too hard to see…

I assume the Bootstrap class of nav nav-pills has this be default?

Yes, I understand that you want to change the background color when hovering, but you still need to use the background-color property; the color property applies to the text, not the background.
Hmm…okay, I think you’re right that the current hover style is the default for the framework being used. The only way that I can think of to get around it is to put !important in your CSS within your a:hover pseudoclass in order to override the default.