Custom Menu Active Page

[FloStu]

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

[dennisedson]

@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?

[mIIwaukee]

Here's another approach for anyone that's interested. Create a module for editing navigation. When including it in a template:

{% for item in module.nav_item %}
<li class="nav-item">
<a class="nav-link {%if content.id == item.link_to.url.content_id %}active{% endif %}" href="{{item.link_to.url.href}}">{{ item.link_title }}</a>
</li>
{% endfor %}

[John]

You need js.

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

[FloStu]

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

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

Thanks

Flo