Highlight the selected navigation item (widget menus)

Support
#1

Hi Guys,

I’m trying to highlight the selected navigation item based on links within the same page.
Menu items are anchor links defined by ID and I’m displaying them using the Navigation Menu widget.

Hope you can help.

Cheers,

Claire : )

#2

Hi Claire,

Thanks for writing in!

Can you provide us the url of the page where we can see the Navigation Menu Widget and the links you are referring to.

Thanks

#3

Hi Paul,

Just responded via secure note.

Thanks again in advance for your swift response.

Claire :slight_smile:

#4

Hi Claire,

Please add this code under X > Theme Options > JS:

jQuery(document).ready(function($) {
	$("#menu-latest-greatest li a").on('click', function(event) {
		event.preventDefault();
		$("#menu-latest-greatest li a").removeClass('x-menu-active');
		$(this).addClass('x-menu-active');
	});
});

After that add this custom CSS under X > Theme Options > CSS:

#menu-latest-greatest li a.x-menu-active {
    color: red;
}

Let us know how it goes!

#5

Thanks superstars - this worked perfectly!

#6

Hi again : )

Is there a way to make the h-widget title of the active menu item highlight too?

#7

Hi there,

Please change the Javascript code to:

(function( $ ) {
	$(function() {

		$("#menu-latest-greatest li a").on('click', function(event) {
			event.preventDefault();
			$("#menu-latest-greatest li a").removeClass('x-menu-active');
			$(this).addClass('x-menu-active');
			$('.widget .h-widget').removeClass('x-menu-active');
			$(this).closest('.widget').find('.h-widget').addClass('x-menu-active');
		});

	});
})(jQuery);

and the CSS code to:

#menu-latest-greatest li a.x-menu-active,
.h-widget.x-menu-active {
    color: #28b46e;
}

Hope it helps.

#8

Thanks a million superstars! Once again, your support service proves to be THE BEST! :slight_smile:

#9

You’re most welcome.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.