I have my top nav-bar inside a PHP include file and I am trying to style the active link in CSS.
Here’s the navbar…
nav class="navbar navbar-expand-lg navbar-dark" id="main-nav">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="assets/images/png/rtmf-logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbar1_collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="../index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="../apply.php">Apply</a></li>
<li class="nav-item"><a class="nav-link" href="../faq.php">Faq</a></li>
<li class="nav-item"><a class="nav-link" href="../news.php">News</a></li>
<li class="nav-item"><a class="nav-link" href="../success.php">Success</a></li>
<li class="nav-item"><a class="nav-link" href="../testimonials.php">Testimonials</a></li>
<li class="nav-item"><a class="nav-link" href="../rtm-guidance.php">RTM Guidance</a>.
</li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Here’s the css…
.navbar-nav > .nav-item > .nav-link.active {
color: rgba(118, 255, 0, 0.8);
border-bottom: 1px solid rgba(118, 255, 0, 0.6);
}
Here is my page as a whole.
<head>
<base href="/">
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js"></script>
</head>
<body is="dmx-app" id="home">
<?php include 'includes/header.php'; ?>
<main>
<h1>HOME</h1>
</main>
<?php include 'includes/footer.php'; ?>
<script src="bootstrap/4/js/popper.min.js"></script>
<script src="bootstrap/4/js/bootstrap.min.js"></script>
</body>
</html>
So if I have hash each url link then whatever nav-bar link i select it activates the style for all links not just the selected one. If I put actual url paths to other pages in all links. Then only the first link in the list works.
Not sure what i’m missing here.
Any help would be appreciated.
Thanks in advance!
Community Page
Last updated:
Last updated: