Bootstrap 3 - Navbar active class
34,476
Solution 1
Gotcha,
You are missing navbar theme class on .navbar
div. Add class .navbar-default
to .navbar
and all done.
Updated HTML
<section class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="index.php">New Listings</a>
</li>
<li><a href="homes.php">Houses</a>
</li>
<li><a href="land.php">Land</a>
</li>
<li><a href="mortgagecalc.php">Mortgage Calculator</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">For Pros<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li> <a tabindex="-1" href="#">Register for Caraga Homes</a>
</li>
<li class="divider"></li>
<li> <a tabindex="-1" href="#">Post a listing for free</a>
</li>
</ul>
<!-- drop down Menu -->
</li>
</ul>
</section>
And all done. Demo: http://jsfiddle.net/shekhardesigner/r2qaZ/
Solution 2
<script type="text/javascript">
jQuery(document).ready(function($){
var url = window.location.href;
$('.nav a[href="'+url+'"]').parent().addClass('active');
});
</script>
Author by
user2831179
Updated on July 09, 2022Comments
-
user2831179 almost 2 years
$("#houses a:contains('Houses')").parent().addClass('active');
<body id="houses"> <li><a href="houses.php">Houses</a></li> </body>
When I click on the nav(houses), at the inspect element it adds the class active but it doesn't change the color of the nav. adds class but no effect.
I have been trying to follow a tutorial. It seems to work fine there, just not for me.