Jump to content

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


Kass
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...