CSS Active link not working

css, html

Solution

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>

Problem

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.

Original source