Custom Menu Active Page

Occasional Contributor

Hi,

 

how do i get it done that the current page is always highlighted from my custom menu? In another post it was mentioned that the "custom-menu-primary" automatically activates the status "active", but unfortunately this didn't work out

 

 

 <div id="navbar" class="navbar-collapse collapse">
	<ul class="nav navbar-nav navbar-right">
		<li><a href="/link-1">Link 1</a></li>  
		<li><a href="/link-2">Link 2</a></li>
		<li><a href="/link-3">Link 3</a></li>
		<li><a class="btn-info" href="/button-link">Button</a></li>
	</ul>
</div>

 

Thanks

Flo

Reply
0 Upvotes
3 Replies
Top Contributor

You need js.

$("#navbar a").each(function() {
    if ((window.location.pathname.indexOf($(this).attr('href'))) > -1) {
        $(this).parent().addClass('active');
    }
});

 

Reply
0 Upvotes
Occasional Contributor

Hey @John,

 

thanks a lot for the help and the fast support. The JS works, but Home "/" is always set to active (sorry, I forgot to mention home), how do I manage that it is not always set to active?


Would it also be possible to activate the home "/" when subpages are opened from the content? These subpages cannot be accessed via navigation.

Home Subpages

Pillar 1 > /home/pillar-page-1

Pillar 2 > /home/pillar-page-2

Pillar 3 > /home/pillar-page-3

 

@dennis_eYes, I know that I need additional css for the active status.

 

Thanks

Flo

Reply
0 Upvotes
Regular Advisor | Platinum Partner

@FloStu, did you check the code? 

You need to add styles for the active state.  I dont believe that is out of the box.

 

do you have a preview link you could share?

dennis
Reply
0 Upvotes