CSS Active link not working

Question

So I have a nav bar. Built using Zurb:

<div class="seven columns navigation" id="navigation">
    <a href="#">Page1</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
    <a href="#">Page4</a>
    <a href="#">Page5</a>
 </div>

On hover the navigation changes the background color. Thats simple. However I can not get the background to stay if the link is active. So if your on page1 it stays with a blue background.

Here is the CSS i have tried so far.

.navigation a {
  font-size: 1.2em;
  display: inline-block;
  margin-top: 20px;
  padding: 8px 12px;
  color: #666666;
  font-weight: bold; }

.navigation a:hover{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

.navigation a.active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

#navigation a .active-link{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

Non of it works, I have googled this loads, but it all says active-link should work?

Can anyone tell me where I am going wrong? Sorry if its simple CSS isn't my strongest language.

EDIT:

Thanks for the suggestions, however

.navigation a:active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

doesn't work either.

Answer 1

I saw that there's an error here, as it should be :active and not .active, so replace:

.navigation a.active {
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

With:

.navigation a:active {
  background: #29abe2;
  border-radius: 5px; 
  color: #fff;
}

---

Else, if you are talking about each page having an active state, then what CSS you have written is correct. In your HTML, you need to add this:

<div class="seven columns navigation" id="navigation">
  <a href="#" class="active">Page1</a>
  <a href="#">Page2</a>
  <a href="#">Page3</a>
  <a href="#">Page4</a>
  <a href="#">Page5</a>
</div>

Now, that particular link will be displayed in the active state. It has to be done for each page, if you are using HTML, or it can be done using programming if you are using something like PHP. So, the same thing in PHP would be:

<div class="seven columns navigation" id="navigation">
  <a href="#"<?php if ($page == 1) echo ' class="active"'; ?>>Page1</a>
  <a href="#"<?php if ($page == 2) echo ' class="active"'; ?>>Page2</a>
  <a href="#"<?php if ($page == 3) echo ' class="active"'; ?>>Page3</a>
  <a href="#"<?php if ($page == 4) echo ' class="active"'; ?>>Page4</a>
  <a href="#"<?php if ($page == 5) echo ' class="active"'; ?>>Page5</a>
</div>

Answer 2

To solve that with just CSS tricks you'll need to use the Selector Target, first you attribute different id for the pages and put the link to that reference, then you change the style base on the ID that is being target.

Here is the JS Fiddle of the Solution with just CSS and HTML

But essentially it works like this:

Here is your HTML with the id and target changes

<div class="seven columns navigation" id="navigation">
    <a href="#page1" id="page1">Page1</a>
    <a href="#page2" id="page2">Page2</a>
    <a href="#page3" id="page3">Page3</a>
    <a href="#page4" id="page4">Page4</a>
    <a href="#page5" id="page5">Page5</a>
</div>

And after all that css you need to change the style based on the target like so:

#page1:target, #page2:target, #page3:target, #page4:target, #page5:target{
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

This works, but the usual is to use a server side, such as ruby on rails, python, php, whatever language you feel confortable that will provide the exact url and that use a simple jQuery .addClass() or .removeClass() or even .toggleClass() to put the active class on the right link.

Hope It Helps! Cheers

Answer 3

a:visited is actually your '.active' state. For the effect that was causing you to wonder what was going on.

You've got to include it in your a: pseudo classes if you're going to try and utilize it that way.

Establishing a "default/reset" state for your <a> elements will prevent this type of "WTF?" scenarios:

a:link { color:black }
a:hover { color:blue }
a:visited, a:active, a:focus { color:red }

When you want a particular link to show "highlighted" on its corresponding page, you're best off to use an ID or Class (depending on your usage):

<a id="highlight">Home</a>
<a>About</a>
<a>Contact</a>

EDIT

Reread your question again. #navigation a .active-link{... isn't working for you because of the space between a and .active-link. You're actually targeting a child of a with the class name of active-link. Fix #1 would be a.active-link.

Disregard what you're reading above about PHP, Targeter, etc. It seems that you're just trying to make your navigation 'highlight'/change for just the page that matches the link in the nav. You can easily do this with straight HTML/CSS (if you have problems with this, server-side code solutions will just frustrate you more). See the three <a> elements in my answer. Then add this to your CSS (Fix #2):

a#highlight { color:red }

I believe that your snafu is all a product of using class names that are too close to 'reserved' names in CSS (so you missed a.active vs a:active -- even though both ARE VALID, they're easy to miss when you're proofreading your code). (Fix #3)