Solved

Bootstrap change nav font color

Posted on 2014-09-30
10
631 Views
Last Modified: 2014-09-30
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.
0
Comment
Question by:mel200
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40352339
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
 

Author Comment

by:mel200
ID: 40352346
Argh. Thanks.
0
 

Author Comment

by:mel200
ID: 40352364
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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 10

Accepted Solution

by:
jtwcs earned 500 total points
ID: 40352395
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40352563
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
 

Author Comment

by:mel200
ID: 40352819
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
 
LVL 10

Expert Comment

by:jtwcs
ID: 40352840
Did you try the declarations that I posted earlier?  They are more specific and will override the other bootstrap declarations.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40352857
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
 

Author Closing Comment

by:mel200
ID: 40352866
I apologize, I somehow skimmed over that. It works, thanks so much!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40352871
>>>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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Need help with FaceBook login 2 41
boostsrap 1 35
wordpress theme 8 39
regular gmail; not g-suite. one label. 11 49
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This video teaches users how to migrate an existing Wordpress website to a new domain.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question