title: How to add “active” class to current menu item in WordPress
body: <p>I have a WordPress based website, and my theme highlights the current menu item by adding "current-menu-item" class to it.</p>
  
  <p>The thing is that I have a menu item with 3 submenu items and all of them point to the same page with different container ids (their href contains container Id), hence all of them are highlighted.</p>
  
  <p>How can I highlight only the menu item which's href points to the currently viewed container?</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;ahref="URL/who-we-are/"&gt;&lt;span&gt;WhoWeAre&lt;/span&gt;&lt;/a&gt;
  &lt;ul&gt;
      &lt;li id="first"&gt;&lt;ahref="URL/who-we-are/#wherewework"&gt;&lt;span&gt;WhereWeWork&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="second"&gt;&lt;ahref="URL/who-we-are/#whatwebelieve"&gt;&lt;span&gt;WhatWeBelieve&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li id="third"&gt;&lt;ahref="URL/who-we-are/#ourpartners"&gt;&lt;span&gt;OurPartners&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;ahref="#"&gt;&lt;span&gt;GetInvolved&lt;/span&gt;&lt;/a&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;ahref="URL/vacancies/"&gt;&lt;span&gt;Vacancies&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;ahref="URL/Become-Active/"&gt;&lt;span&gt;BecomeActive&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;ahref="URL/contactus/"&gt;&lt;span&gt;ContactUs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have tried this <a href="https://stackoverflow.com/a/7557433/5077196">answer</a> by inserting the following after  tag:</p>
  
  <pre><code>function onVisibilityChange(el, callback) {
      var old_visible;
      return function () {
          var visible = isElementInViewport(el);
          if (visible != old_visible) {
              old_visible = visible;
              if (typeof callback == 'function') {
                  callback();
              }
          }
      }
  }
  
  var handler = onVisibilityChange(#whatwebelieve, function() {
      $( "#second" ).removeClass( "current-menu-item" )
  });
  
  
  //jQuery
  $(window).on('DOMContentLoaded load resize scroll', handler);
  </code></pre>