Active Anchor Tag links

[suzannereid]

Hi all!

In the Pro headers, is there a way to have the links in the nav bar show their hover state when they are at a specific anchor tag on a page? This is a unique build as the client wants both a top bar menu AND a side bar menu and only the sidebar content is anchor tags.

Thanks,

Esther

[nabeel]

Hi there,

Thanks for writing in! This can be achieved with custom script, try adding the following JS code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('header ul li').each(function(){
		$(this).removeClass('current-menu-item');
	});
	
	$('header ul li').click(function(){
		$('header ul li').each(function(){
			$(this).removeClass('current-menu-item');
		});
		$(this).addClass('current-menu-item');
	});
});

Then add the following CSS code in the Theme Options > CSS:

.current-menu-item {
    border-bottom: 2px solid #00dcff;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!