Bootstrap: How to give active class to nav-items on secondary-level navigation

[Kass]

Hello all!

I think this may require writing a function, which I'm not too good at...

I have a primary navigation and secondary navigation, each with multiple nav-items. 

When a user visits a child or grand-child of a nav-item on the primary navigation, the parent nav-item retains its "active" class - no problem.

The issue: When a user visits the child or grand-child of a nav-item on the secondary navigation, the nav-item on the secondary navigation not retain its "active" class. It only has an active-class when the user is on the landing page of the nav-item.

Bootstrap automatically gives the "dropdown sublevel-menu" (secondary nav) an active class when the user is on the landing page of the nav-item, but if the user visits children of the nav-item, the active-class disappears. The primary nav-items retain the "dropdown active" even when their children are active.

I'd appreciate any help with this head-banger! 

Thanks

[Zeka]

Hi @Kass

Solution mostly depends on your menu implementation. 

As for me, when I have some complex menu system, usually I build it with repeater field. For every menu item I have Selector field ( InputfieldSelector ) where I define selector when current menu item will be active, and then in my code I use 

$page->matches($selector);

https://processwire.com/api/ref/page/matches/

  In that way, I can set the active state for every menu item even if the current page is not under current parent.

[bernhard]

hi kass,

it could also be an option to do something like this (pseudocode):

<?php
$page; // current page being displayed
$active = $page->parents->add($page); // all parents of current page + page itself

if($active->has($page)) echo 'class="active"';

didn't read your post deeply but maybe that's a point in the right direction  good luck

[szabesz]

Hello Kass,

As far as I can see, you could get some ideas by studying this site profile:

 

Edited May 15, 2017 by szabesz
edit: submitted the post a bit too early :(