I have started learning web programming as a project and I've been having a hard time with getting my links to show as active on the navbar. I did start by looking for similar questions asked in the past but none of the answers seemed to fix my problem.
Here is my code
<div>
<hr>
<nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
<ul class="navbar-nav">
<li class="active nav-item">
<a class="nav-link active" style = "padding-left: 0px; color: white;" href="#">Most Popular</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Sports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Science</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Politics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Economics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Random</a>
</li>
<li class="nav-item">
<a class="nav-link " style="padding-left: 480px; color: white; " href="#">Log in</a>
</li>
</ul>
</nav>
</div>
and I tried using this javascript I found but it hasn't worked so far
$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
})
Hopefully, my code isn't too funky since I am just getting started. Any help would be tremendously appreciated thank you very much!
I have started learning web programming as a project and I've been having a hard time with getting my links to show as active on the navbar. I did start by looking for similar questions asked in the past but none of the answers seemed to fix my problem.
Here is my code
<div>
<hr>
<nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
<ul class="navbar-nav">
<li class="active nav-item">
<a class="nav-link active" style = "padding-left: 0px; color: white;" href="#">Most Popular</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Sports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Science</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Politics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Economics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white">Random</a>
</li>
<li class="nav-item">
<a class="nav-link " style="padding-left: 480px; color: white; " href="#">Log in</a>
</li>
</ul>
</nav>
</div>
and I tried using this javascript I found but it hasn't worked so far
$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
})
Hopefully, my code isn't too funky since I am just getting started. Any help would be tremendously appreciated thank you very much!
Share Improve this question edited Jun 27, 2024 at 21:07 TylerH 21.1k77 gold badges79 silver badges112 bronze badges asked May 4, 2018 at 10:14 kirkosaurkirkosaur 1071 gold badge1 silver badge10 bronze badges4 Answers
Reset to default 11There are multiple issues...
- The selector $('.nav li') does nothing because you have no
.navclass used anywhere in the markup. It should be $('.navbar-nav .nav-link'). - You have
style="color:white"on the links which will override any changes you make with theactiveclass. - You have no CSS for the active class, and by default Bootstrap active class on navbar-dark is going to be white. What color are you trying to set?
- Set active in the
nav-linkinstead of the li,
.navbar-dark .nav-item > .nav-link.active {
color:white;
}
$('.navbar-nav .nav-link').click(function(){
$('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})
Demo: https://www.codeply.com/go/I3EjDb74My
If you have relative links (e.g. "/projects") in your navbar,
// remove any current navbar active classes
$(".navbar .nav-item.active").removeClass('active');
// add active class to proper navbar item that matches window.location
$('.navbar .nav-item a[href="' + location.pathname + '"]').closest('li').addClass('active');
Absolutely! Here's the code with the fix for highlighting the active navbar link, along with explanations
$(document).ready(function() {
$('.nav-link').click(function() {
// Remove 'active' class from all links
$('.nav-link').removeClass('active');
// Add 'active' class to the clicked link
$(this).addClass('active');
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Navbar Link</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div>
<hr>
<nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Most Popular</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Science</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Politics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Economics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Random</a>
</li>
<li class="nav-item">
<a class="nav-link" style="padding-left: 480px;" href="#">Log in</a>
</li>
</ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script> </body>
</html>// active nav
// get current url
var location = window.location.href;
// remove active class from all
$(".navbar .nav-item").removeClass('active');
// add active class to div that matches active url
$(".nav-item a[href='"+location+"']").addClass('active');