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

Better to use in jQuery for browser compatibility

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
  $( document ).ready(function() {
    var urlArray = window.location.pathname.split( '/' );
    var pagAtual =urlArray[urlArray.length -1];
    $("a[href*="+pagAtual+"]").css("color","#67E8A7");
  });
</script>

Answer 2

In other news, :action is also cancelled if you have event.preventDefault() on mousedown event.

This doesn't apply to click and mouseup events though, you can use preventDefault() with them without cancelling :action behavior. I didn't tested touch events, but I assume it will be the same case.

Answer 3

You can't quite do what you want to do with pure CSS. First, you have to define the class to use for a link when the user is on that page (like you did, but you have a typo):

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

Next, you need to apply that class to the link when the user visits that page. So, if I'm on Page 1, the navigation would look like this:

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

Answer 4

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)

Answer 5

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 6

I got the same problem, but I solved it the following way, but some things are weird:

The app.component.html file:

    <div class="container">
      <nav class="navbar" >
        <form class="form-inline">
          <a routerLinkActive="active" routerLink="list">List</a>
          <a routerLinkActive="active" routerLink="create" 
             style="padding-left: 20px;">Create</a>
        </form>
      </nav>
      <router-outlet></router-outlet>
    </div>

The app.component.css file:

    /* unvisited link */
    a.link {
      color: blue;
    }

    /* selected link */
    a.active {
      color: hotpink;
    }

    /* visited link (This doesn't work well, so I don't use it in my app)*/
    a.visited {
      color: green;
    }

    /* mouse over link */
    a:hover {
      color: red;
    }

Weird things:

1. For active link color, "a.active" works, while "a:active" does NOT work;

2. For hover color, "a:hover" works, while "a.hover" does NOT work.

3. For visited link color, if I use "a:visited", other colors will be disabled.

There are still other cases, but it'd be too much to talk in details.

It took me a long time to figure it out.

By the way, routerLinkActive="active" is necessary. I got rid of it just to test it, and it didn't work. So I put it back, and then it worked fine.