Copy link to clipboard
Copied
Hi,
I am trying to set up a simple Bootstrap menu it works fine except the Active component doesn't work. Meaning, when I load the page into a browser, I can click on the various links in my menu and the browser will take me there, but the "Active" display doesn't change. I'm using bootstrap.css, jquery-1.11.2.min and bootstrap.js. I even tried making a fresh HTML page and loading a fresh bootstrap menu into it -- no luck. I'm at my wit's end, so any help will be much appreciated. Here's my code, HTML and CSS.
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active">
<a href="inside_page_1.html">Inside Page 1<span class="sr-only">(current)</span></a>
</li>
<li><a href="inside_page_2.html">Inside Page 2</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #00B309;
background-color: #FF0004;
}
It does work if you manually change the location of the active class on each page's menu.
Or you can do it with pure CSS code
Persistent Page Indicator on Menus - http://alt-web.com/
Or do it with JQuery code.
<script>
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
Nancy O.
Copy link to clipboard
Copied
It does work if you manually change the location of the active class on each page's menu.
Or you can do it with pure CSS code
Persistent Page Indicator on Menus - http://alt-web.com/
Or do it with JQuery code.
<script>
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
Nancy O.
Copy link to clipboard
Copied
Thanks Nancy O, You have saved my sanity. Thanks especially for giving me 3 methods. I'll do it manually for now because I don't have a lot of pages, but it's great to know the two other methods are there.
Copy link to clipboard
Copied
Persistent menu highlighting is important when using server-side includes for site wide nav. And I use SSIs on 5 page sites as well as 50 pages sites.
Nancy O.