How to keep "active" css on menu item when clicking on other link on same page? I have an issue with my main menu.
When you click on the "Cases by Topic" menu item, you are taken to the "Cases by Topic" page. The "Cases by Topic" menu item is then given the css class "active". I set it up so if a menu item has "active" css it is dark blue, rather than light blue to indicate it is the current menu item.

The page it's self has a drupal block that has a bunch of taxonomy menu items. Each one of these taxonomy menu items also point to this page but will load a different set of information in the page (which is a drupal view).

When they click on a taxonomy link in the block it reloads the page, but then the "Cases by Topic" main menu item no longer has the "active" css class on it.

Here is a picture example:

The user clicks on the "Cases by Topic" main menu item and the page loads. At this point the "Cases by Topic" menu item has the 'active' css class.  The user then clicks on a taxonomy link in the drupal block ("Access to Information").



The same page reloads, but now the "active" css is on the taxonomy link and not the main menu "Cases by Topic" menu item.


I would really like to have the "active" css class stay on the "Cases by Topic" main menu item, even when people click the links in the taxonomy block.

At the very least I would not have the taxonomy link just clicked have "active" css and "Cases by Topic" should keep that css class.

Any ideas?
You could consider using jQuery client-side to set the class based on path. See this post on how to do that: http://www.itworld.com/article/2832973/development/setting-an-active-menu-item-based-on-the-current-url-with-jquery.html

or you could try using Menu Trail By Path module
https://www.drupal.org/project/menu_trail_by_path