jasonsyourhuckleberry
11/18/2019 - 7:16 PM

Nav color control for mixed WP submenus

This is JS that controls the active link color on WP submenus that have both direct page links and anchor links on the same drop-down. It prevents all the anchor link menu items on an active page from being highlighted, and it highlights the correct anchor link on a submenu when navigating to it from another page.

submenu-nav-item-color
content_copyfile_download
<script>
(function ($) {
	$(document).ready(function () {
		var menu_items_links = $(".nav li a");
		menu_items_links.each(function () {
			if ($(this).is('[href*="#"]')) {
				$(this).parent().removeClass('current-menu-item current-menu-ancestor');
				$(this).click(function () {
					var current_index = $(this).parent().index(),
						parent_element = $(this).closest('ul');
					parent_element.find('li').not(':eq(' + current_index + ')').removeClass('current-menu-item current-menu-ancestor');
					$(this).parent().addClass('current-menu-item current-menu-ancestor');
				})
			}
		})
	});
})(jQuery);
</script>
submenu-nav-item-color-styles
content_copyfile_download
/* Set all submenu colors to inactive website color */

#top-menu .sub-menu li a,
.et-fixed-header #top-menu .sub-menu li.current-menu-item>a {
	color: gray!important;
}