Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a menu containing 2 item that pointing to 1 page, my question is how do i highlight the top level item according to where i click it.

<nav>
 <ul class="mainNavi" id="menu-main">
  <li><a href="#">Home</a></li>       
  <li><a href="#">Funding Guidelines</a>
    <ul class="sub-menu">
     <li><a href="#">Learning Institutions</a>
         <ul class="sub-menu">
           <li><a href="#">Who Is Eligible</a></li>
           <li><a href="#">What We Fund</a></li>        
         </ul>
     </li>       
     <li><a href="#">FAQs</a></li>
    </ul>
 </li>
 <li><a href="#">Projects</a></li>
 <li><a href="#">Donations</a>
     <ul class="sub-menu">
       <li><a href="#">Make Donation</a></li>
       <li><a href="#">Request for Tax Exempt Receipts</a></li>
       <li><a href="#">FAQs</a></li>
     </ul>
  </li>
 </ul>
</nav>

Referring to above i have two FAQ link, one under Funding Guideline and another one under Donation which both link to the same page. My problem is how to highlight the top-level menu when i click to the link under respective sub-menu, without highlighting the other one. What i have now is that when i click to the menu, it's highlighted both top level menu.

share|improve this question
1  
can we see the code you are using to do the highlighting? –  BandonRandon Mar 27 '12 at 6:51
    
@BandonRandon i've pointed out the css to change color for current-menu-item and current-menu-ancestor class. –  ajapis Mar 29 '12 at 7:20
add comment

1 Answer

you're best bet may be to set a custom class for each of the FAQ links then do a simple jquery on click for that event.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.