Cannot change text colour of currently active menu item in the navbar

Question

For my college project I need a website with a functional navigation menu. I've pretty much managed to make it work the way I intend it to, but there is one issue I was unable to solve.

Basically, I have a navbar which has red background colour for the link blocks, the link text itself is white. On hover, the bg colour changes; however, for each page of my website I want the menu item with that page to be of a different colour from the other menu items. I decided to go with yellow, but found that white text did not work. I wanted to make it a dark-grey colour, but the issue I faced was that the background colour changes fine, but the text colour I simply can't make it to change, no matter what. I tried putting it in different places in the CSS sheet (in case there was anything overriding it), but nothing seems to work.

Here is a jsfiddle link to an illustration of my problem (I also attached all the code at the end of the post): http://jsfiddle.net/axetm8fL/

As you see, I want the .active class to have text colour of #333 and bg colour of #fc0. While the bg colour changes to the one specified, the text colour stays the same as that of other links of the navigation menu.

I tried selecting specifically the a's of the .active class, even a:link and a:visited, but nothing seemed to help and in some cases even the bg colour property did not work. Maybe there is a problem with my syntax and I need to select it in another way?

Please help.

.header ul {
  list-style: none;
}
.header li {
  float: left;
}
.header a {
  width: 192px;
  padding: 5px 0px 5px 0px;
  display: block;
  background-color: #cc3333;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  font-family: Impact, sans-serif;
  font-size: 24px;
}
.header a:link,
.header a:visited {
  color: #fff;
  text-decoration: none;
}
.header a:hover,
.header a:active,
.header a:focus {
  background-color: #cc6666;
  color: #fff;
  text-decoration: none;
}
.header .active {
  background-color: #fc0;
  color: #ccc;
}

<body>
  <div class="header">
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="fixtures.html" class="active">Fixtures</a>
      </li>
      <li><a href="contact.html">Contact Us</a>
      </li>
    </ul>
  </div>
</body>

score 1 · Accepted Answer · edited May 23 '17 at 12:27

The problem is that your .header .active definition is being overriden by .header a:link, .header a:visited definition. This is because CSS follows a rule order that, to put it simply, depends on how specific a rule is. In this case since, the .header a:link, .header a:visited definition includes the tag name, a, it overrides the more general definition.

A simple fix is adding the tag name to your .active definition. So, changing .header .active to .header a.active will solve this particular problem.

For future reference, you can see this by using the inspector in Chrome (or other browsers) to see which CSS rule is actually in effect for this element.

Screenshot from Chrome Inspector showing the CSS rules

See this Stack Overflow question for more information:

In which order do CSS stylesheets override?

Also, here is your JSFiddle, now working as you intended:

http://jsfiddle.net/axetm8fL/3/

Thank you very much for an informative answer! It turns out my syntax was wrong when I was trying to select the `a` of the `.active` class. And now I know that classes won't override element properties. Thanks again! — Lanaya, Nov 08 '14 at 12:03

score 0 · Answer 2 · answered Nov 08 '14 at 08:01

0

.header .active {
    background-color: #fc0 !important;
    color: #ccc !important;
}

maybe using of !important solve your problem by the way Demo

answered Nov 08 '14 at 08:01

Nima Derakhshanjan

1,380
9
24
37

I see. I tried using `!important` before but it turns out my syntax was wrong. Thank you! – Lanaya Nov 08 '14 at 11:58

Cannot change text colour of currently active menu item in the navbar

2 Answers2