I've been struggling with this issue for hours now. I just can't figure out how to make the active page's menu tab have a white background.
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="image/nav_bar/qsc_burgee_bg_trans.png" width="auto" height="30" class="d-inline-block align-top" alt="">
<strong>QSC</strong>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 nav nav-tabs">
<!-- NavBar content goes here -->
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
// JavaScript code for setting active class
</script>
<style>
.navbar-nav .nav-link .nav-tabs .nav-item{
color: black;
}
.custom-navbar {
background-color: white;
}
.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-item .nav-link:hover {
background-color: white;
color: #000;
}
</style>
</body>
</html>
Even though I managed to change the background to white on hover, I still can't get it to stay white when the tab is active. Any assistance would be greatly appreciated as I am not an expert in coding!