Video: https://youtu.be/aOtayR8LOuc
It is essential that when I click a button on my navigation bar, it will navigate to the correct page. However, since the same nav bar is present on each page, it sometimes tries to redirect to the current page multiple times (e.g., pages/about/pages/about).
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
<a href="pages/News">News</a>
<a href="pages/Animals">Animals</a>
<a href="pages/About">About Me</a>
<a href="pages/Credits">Credits</a>
</div>
</body>
</html>
CSS:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}