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

1 Answers1

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;}
Adam Balsam
  • 785
  • 9
  • 15
  • 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. –  Feb 26 '13 at 18:52
  • It's likely that another style _is_ overriding it. See here for an explanation of CSS specificity: http://stackoverflow.com/questions/9133570/css-specificity-how-does-it-decide-which-styles-to-apply. 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. – Adam Balsam Feb 26 '13 at 19:03
  • well when I restarted the browser the code you mentioned finally worked. thanks a lot –  Feb 26 '13 at 20:50
  • 1
    You should learn how to accept answers before posting any more questions on this site (http://stackoverflow.com/questions/14734145/how-to-put-exposed-filter-in-a-separate-block-in-a-view-in-drupal-7, http://stackoverflow.com/about) – Adam Balsam Feb 26 '13 at 20:58
  • 1
    @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. – Walls Feb 26 '13 at 21:42