0

I have a pretty simple horizontal menu that has a solid background with colored links. How do I change the color of the link when I'm at the targeted page? I tried this #nice-menu-1 li a:active but that only affects the color for a moment when I click on it. I want the color on that item of the menu to stay changed while I am on that page. thanks

Improve this question

1 Answer 1

Reset to default
2

Elements are "active in the definition of the :active pseudo class when that element is being clicked or tapped. So what you describe above is expected behavior.

You'll need to:

  1. Set a class on the link that corresponds to the current page
  2. Target that class with CSS

Luckily, Nice Menus and Drupal handle #1 for you by adding an .active class to the <a> tag and an .active-trail class to the parent <li> tag.

So you can target those in CSS like this:

#nice-menu-1 li.active-trail a, #nice-menu-1 li a.active { color: #0f0;}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Hi I have tried this but it wont reflect it . It seems like something else is overriding what I put for the active element. When I put a color for the hover element (#nice-menu-1 li a:hover{) it works fine though.
It's likely that another style is overriding it. See here for an explanation of CSS specificity: stackoverflow.com/questions/9133570/…. You could also add !important after the value, but you don't want to rely on that crutch in the long run and it won't necessarily work if there is another instance of that selector with !important.
well when I restarted the browser the code you mentioned finally worked. thanks a lot
You should learn how to accept answers before posting any more questions on this site (stackoverflow.com/questions/14734145/…, stackoverflow.com/about)
@DianaCastillo if the answer that was given was helpful and solved your problem, don't forget to approve of the answer so the person who took time to help gets the benefits. Also, any other users having a similar issue can see what worked for you.