I am currently working on a website project using Bootstrap. I have set up a navigation bar with menu items that are supposed to link to different pages. However, I am facing an issue where the links are not functioning as expected. Linking pages is usually straightforward for me, but since I am new to Bootstrap, I believe I might be overlooking something crucial. Is it necessary to include JavaScript code in order to make the links work properly? I typically just specify the path like this: I have all the pages saved in the same directory and I have tried various solutions without success. I even attempted assigning IDs to the menu items and incorporating JavaScript code, yet nothing seems to be working.
$(document).ready(function() {
$('#aboutus').on('click', function() {
location.href = "About kopi.html";
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-fluid">
<nav class="row navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About kopi.html" id="aboutus">About</a>
</li>
</ul>
</div>
</nav>
</div>