I am struggling to change the active item in my bootstrap navbar. I came across a similar question on this topic: Bootstrap navbar Active State not working
Despite trying all of the suggested solutions, none seem to work for me and I can't figure out why. I made sure to adjust the class names in the code where necessary, but still no luck.
This is my navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand">BRAND</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="<?= base_url().'index.php/home'; ?>"><?php echo $this->lang->line('home'); ?></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url().'index.php/about'; ?>"><?php echo $this->lang->line('about'); ?></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= base_url().'index.php/contact'; ?>"><?php echo $this->lang->line('contact'); ?></a>
</li>
</ul>
</div>
</nav>
Here is one of the javascript attempts:
$(document).ready(function() {
$(document).on('click', '.nav-item a', function (e) {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
I suspect that the issue may be related to reloading the navbar when changing pages and overriding the correct navbar with a default one. If this is indeed the problem, how do I go about fixing it? I have limited experience with javascript and css.