[Bug]: Main Link which has a sub menu - active state. Does not work (anymore?)

[Alex-e107nl]

What e107 version are you using?

Latest Github version (just updated)

Bug description

/ Main Link which has a sub menu - active state. $NAVIGATION_TEMPLATE['main']['item_submenu_active'] = '

Does not work, whatever classes i ad in the navigation_template.php..

How to reproduce

No highlited link when you are on a activated sublink...

Expected behavior

I expect an adjustment in the class when a sublink is active, because that works, but the parent link does not get an active status. But:

// Main Link which has a sub menu - active state.
$NAVIGATION_TEMPLATE['main']['item_submenu_active'] = '
    <li class="nav-item active">
        <a class="nav-link " data-bs-target="#{NAV_LINK_DESCRIPTION}-nav" data-bs-toggle="collapse" href="{NAV_LINK_URL}">
         {NAV_LINK_ICON}<span>{NAV_LINK_NAME}</span>
        <i class="bi bi-chevron-down ms-auto"></i>
        </a> 
        {NAV_LINK_SUB}
    </li>
';  

is never used.....

What browser(s) are you seeing the problem on?

Firefox

PHP Version

7.4

[Alex-e107nl]

I am building a proof of concept theme and this was something i did not expected, is there a dirty fix for now i can use? I really need to have a indication that there's a sublink active for the parent link in the nav menu so in i can use a "show" in the the UL of the sublinks, help!

[Alex-e107nl]

I have searched and searched but I really cannot find anywhere within e107 where a link can become active through an active sublink. Sublinks and Main links work but are separate. I also see that on all websites I have built with e107, even with normal dropdowns, there is no active parent link with an activated sublink, so if you are blind and dependent on that you have a problem.

Anyway, I have solved it for now with some JavaScript, but that causes a delay and you see the structure of the dropdown.

I can continue for now, but it would be really nice if the devs here could take a look at it when there is time.

I Used the next code in a .js script that loads with my theme to get an active status for the nearest ul (in my case 'show')...

$(function($) {
  let url = window.location.href;
  $('li ul li a').each(function() {
    if (this.href === url) {
      $(this).closest('ul').addClass('show');
    }
  });
});

[Moc]

Confirmed on a clean install using the bootstrap5 theme. It does work properly on bootstrap3.

Tested with "Content" navigation links. (/page.php). The "Content" link is not active when one of the subpages is selected (e.g. Article 1).

[Alex-e107nl]

Oke, so it could be a bootstrap5 thing.... or something is missing in the navigation_template.php ... I thought that $NAVIGATION_TEMPLATE['main']['item_submenu_active'] would be selected by e107 when a sublink becomes active...

[Moc]

I thought that $NAVIGATION_TEMPLATE['main']['item_submenu_active'] would be selected by e107 when a sublink becomes active...

Yes, that is the intended behaviour I believe.

Do you have your theme code somewhere (github repo?) so I can take a look and test? I'm on Gitter as well.

[Jimmi08]

Bootstrap 5 needs active class with a tag. Core uses bootstrap4 template for this.

Try add active class to <a class="nav-link " (now it is with li element only)

[Alex-e107nl]

Nope, it's all on my laptop.... But it's based on the bootstrap 5 theme so when that works... i am happy :-)

Sidenote - Sorry i was playing half-life alyx on my new legion go and quest2 wireless... amazing... i did not expected that to work - Sidenote

When the standard bootstrap5 theme works i wil get it to work in my themes... btw i do not use something like github, i find it terrible, and also i want the forum back on e107.org... :-)

[Alex-e107nl]

Added active class to <a class="nav-link " everywhere in the navigation_template.php but it does not work... :-( Tried the legacy and bootstrap4 version but it did not helpe...

[Alex-e107nl]

@Jimmi08 it looks like it works with the theme Artemis.... Bootstrap 5.0.1 ... but you have changed a lot in that theme with the navigation.. (e107 latest github)

[Jimmi08]

Hi, this is default bootstrap behaviour (at least for version used in core)

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: var(--bs-navbar-active-color);
}

it is changing only link color with active state, not background. You need to fix this with CSS yourself.

I found 2 bugs:

1. active class is used differently for 'item_submenu' and 'item_submenu_active' (either both should have active li tag or correct a tag, but not one is using a.active and second li.active) - it can be easily fixed with your own template

2. 'submenu_item_active' is not used for active submenu - in dropdown. There should be dropdown-item active but it is not. Legacy URLs are used.

This should be result:

But now it looks:

I can't do more. I hope this helps.

[Alex-e107nl]

Oke, so first thing, the e107_core/templates/bootstrap4/navigation_template.php is used when the theme has bootstrap 5 in the theme.xml. In the standard bootsrap5 theme there's no /templates so the version for Bootstrap4 is used. Something has changed in the handling of links in Bootstrap 5 from version 5.0.1 -> 5.3.2 and that is what i have to find :-)

When i use this with a 'show' behind the active :

// Main Link which has a sub menu - active state.
$NAVIGATION_TEMPLATE['main']['item_submenu_active'] = '
    <li class="nav-item dropdown active show {NAV_LINK_IDENTIFIER}">
        <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" data-bs-toggle="dropdown" id="navbarDropdownMenuLink-{NAV_LINK_ID}" aria-haspopup="true" aria-expanded="true" data-target="#" href="#">
         {NAV_LINK_ICON}{NAV_LINK_NAME}
        </a>
        {NAV_LINK_SUB}
    </li>
';

And in the style.css:

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: var(--bs-navbar-active-color);
}

I get a visual active navbar link or when a sublink is active! Yessssss

[Jimmi08]

At first - bootstrap4 shouldn't be used, it is confusing and you don't know this without looking at the code. Bootstrap5 core folder should be created. Or the opposite way, actual templates should be bootstrap5 version and older ones should be moved to respective templates folders.

Nice catch with that show class. Just active should be with nav-link class and it is with a tag.

[Alex-e107nl]

You're absolutely right Jimmi, but you know how I am, left or right I use what I can to get it working, reference should always be https://getbootstrap.com/docs/5.3/components/navbar/ and the ' show' should come from the javascript used, but if that is not the case.... If I read it correctly, you wouldn't need the active states ($NAVIGATION_TEMPLATE['main']['item_submenu_active'] ) in the navigation_template.php at all.... right?

[Alex-e107nl]

Oke, been playing with some things, installed new e107 with latest git, added the translations :-) thx! but the moment you activate and use the SEO links pagina/general/chapter-1/article-1 you never get a active sub or parentlink... using page.php?id=1 it works as expected, so parent link gets activated an sublink also... Normal links without sub work as expected. And sorry but that is to complicated for me.. PHP version does not matter, 8.1.25 is what i use now... Yeah version 2.3.3!!!

ps the biggest problem is when you choose for a link with the function All pages for chapter one...