Is there a way to add a navigation bar in my footer on the layout page without having to add it to every individual page? I want the icon color for the active page to be red, but only apply this to the current page and not all pages.
Currently, when I navigate to another page, the home1 icon remains red. How can I make only the current page icon red?
<footer class="footer">
<!-- Just an image -->
<nav class="navbar navbar-light bg-light" id="myDIV">
<a class="navbar-brand " href="/home1">
<i class="mynav fas fa-home active"></i>
</a>
<a class="navbar-brand" href="/home2">
<i class="mynav fas fa-shopping-basket"></i>
</a>
<a class="navbar-brand" href="/home3">
<i class="mynav fas fa-cog"></i>
</a>
<a class="navbar-brand" href="/home4">
<i class="mynav fas fa-star"></i>
</a>
</nav>
</footer>
//JavaScript
<script type="text/javascript">
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("mynav");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
//CSS
.mynav .active {
color: black;
}
.active, .mynav:hover {
color: #dc3545;
}