Bootstrap change nav font color

Hi, I have this page: codedivasites.com/new/

I want to change the nav font color for about, services, etc to black, with a white hover, like the HOME.

I have custom CSS of:
a.navbar-custom:link {
    color: #000;
}


a.navbar-custom:visited {
    color: #000;
}


a.navbar-custom:hover {
    color: #FFF;
}


a.navbar-custom:active {
    color: #FFF;
}

And in the html I have:
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-custom">
                    <li>
                        <a href="about.html">About</a>
                    </li>
                    <li>
                        <a href="services.html">Services</a>
                    </li>
                    <li>
                        <a href="portfolio.html">Portfolio</a>
                    </li>
                    <li>
                        <a href="contact.html">Contact</a>
                    </li>
                </ul>

I'm not sure where I'm going wrong. Thanks for your help.
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
You do not have any a tags with the class navbar-custom.

I think what you want is: .navbar-custom a:link etc

Cd&
0
mel200Author Commented:
Argh. Thanks.
0
mel200Author Commented:
ok, changed it to this,  but still not working on my browser. (Using red so it's easier to see when it's done, will change that later):

 .navbar-custom a:link {
    color: #ff000;
}


.navbar-custom:a.visited {
    color: #ff000;
}


.navbar-custom:a.hover {
    color: #FFF;
}


.navbar-custom:a.active {
    color: #FFF;
}
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

jtwcsCommented:
The last three of your declarations above are still not correct as you have the : in the wrong place.  They should be like the a:link one.

The below styles are more specific and should be what you are looking for.
#bs-example-navbar-collapse-1 .navbar-custom a:link, #bs-example-navbar-collapse-1 .navbar-custom a:visited {
    color: #000000;
    font-size: 18px;
}
#bs-example-navbar-collapse-1 .navbar-custom a:hover, #bs-example-navbar-collapse-1 .navbar-custom a:active {
    color: #FFFFFF;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
Yeah the typo screws up the declarations.  If it still isn't working you will need to post a link so I can see how the bootstrap bloat is interfering with what would be a ten second change in a normal stylesheet.

Cd&
0
mel200Author Commented:
ah, sorry about that. It's fixed, but still not working. You can see the html at: codedivasites.com/new/index.html and the css at
codedivasites.com/new/css/main.css and codedivasites.com/new/css/bootstrap.css and codedivasites.com/new/css/bootstrap.min.css.

Thanks.
0
jtwcsCommented:
Did you try the declarations that I posted earlier?  They are more specific and will override the other bootstrap declarations.
0
COBOLdinosaurCommented:
The font color is coming from the declaration:  .navbar-inverse .navbar-nav > li > a {

In bootstrap.min.css

So you have to go into the bootstrap junk and do the change that would have taken seconds to locate and change if you were using your own styling instead of the third party junk.

Cd&
0
mel200Author Commented:
I apologize, I somehow skimmed over that. It works, thanks so much!
0
COBOLdinosaurCommented:
>>>Did you try the declarations that I posted earlier?  They are more specific and will override the other bootstrap declarations.

Why would you want to hack it by adding more bloated to already bloated collection of junk declarations, and cripple the cascade even more than it is by binding the content and presentation which is exactly opposite of how CSS is supposed to be used?

Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.