I have a navbar with nav-links that properly applies the “active” class to the nav-link when the page is loaded, however if I am on another page and click on the link, the active class is not applied, and therefore is not bold.
This is what displays when I initially load a page:
And this is what displays when I navigate to the page using the selected link:
“Integrations” is not bold because the “active” class is not applied.
@Teodor Any reason why this shouldn’t work?
Hi Ken, is the navbar script included on the page?
Is the navabr dynamic?
This one? Yes.
<script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>
The navbar is a partial and only dynamic with a show attribute (which I tried removing but no change.)
<!-- Wappler include head-page="my_profile" appConnect="local" is="dmx-app" bootstrap5="local" bootstrap_icons="cdn" fontawesome_5pro="cdn" -->
<nav class="navbar navbar-expand-lg navbar-light bg-white d-none d-lg-block">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-white" id="navbar1_collapse">
<div class="navbar-nav flex-column">
<a class="nav-item nav-link " href="/settings/my_profile" internal>My Profile</a>
<a class="nav-item nav-link" href="/settings/preferences" internal dmx-show="current_user.data.permissions.agent_features">Preferences</a>
<a class="nav-item nav-link" href="/settings/team" internal dmx-show="current_user.data.permissions.agent_features">Team</a>
<a class="nav-item nav-link" href="/settings/integrations" internal="" dmx-show="current_user.data.permissions.agent_features">Integrations</a>
<a class="nav-item nav-link" href="/settings/billing" internal="" dmx-show="current_user.data.permissions.agent_features">Billing</a>
<a class="nav-item nav-link" href="/settings/notifications" internal="" dmx-show="current_user.data.permissions.agent_features">Notifications</a>
<a class="nav-item nav-link" href="/settings/company" internal="" dmx-show="current_user.data.permissions.agent_features">Company</a>
</div>
</div>
</nav>
So the partial is included on your layout page or on your content pages? And also the js script is in the layout page?
Yes to both.
It looks like it briefly is applied, but then removed. I can’t find any listener that might be doing this???
Screen Recording 2022-02-07 at 8.59.38 AM
Actually, that might be the mouseover event I’m seeing in the video.
There must something specific on your page that’s causing this.
Just made 2 tests with the nav js script included on the layout page then added the nav partial on the layout, then on the content pages - in both cases it works. Are you sure the js include is not included more than once on any of the pages?
Yep, just checked again. Thanks for doing those tests, I agree it must be something on my page then. I’ll keep at it!
Just in case it wasn’t obvious…if I remove “internal” from the link, it works as expected because there is a page refresh. With internal, is where I have the problem.
ah, ok I see. Let me check that.
I just tested with internal on and off - the behavior is the same, the active menu gets the active class.
Can you maybe provide a link where we can check your page?