Can't change the color of my font?

Can't change the color of my font?
0

#1

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:


#2

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.


#3

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


#4

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?


#5

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?


#6

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.