2 item in a same menu pointing to 1 page

Question

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.

Answer 1

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.

Answer 2

Just had this problem today, here is how I've solved it.

You must prioritize 1 of the 2 links.

One must become the real page link that will be highlighted along with its top-level menu. The other link will become a short cut, and when you arrive at the FAQ page the real link will be highlighted rather than the shortcut.

To create the shortcut, create an external link in your menu, and use a Root-relative URL, and add a ? at the end. For example /faq?

This will prevent the .current-menu-item and .current-menu-ancestor classes from being applied on the shortcut version.