Bootstrap CSS Active Navigation

Question

On the Bootstrap website the subnav matches up with the sections and changes background color as you or scroll to the section. I wanted to create my own menu without all the background colors and everything, however, I changed my CSS to be similar but when I scroll down or click on the menu item the active class does not switch. Not sure what I'm doing wrong.

HTML:

<ul class="menu">
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS:

.menu {
  list-style:none;
}
.menu > li {
  float: left;
}
.menu > li > a {
  color: #555;
  float: none;
  padding: 10px 16px 11px;
  display: block;
}
.menu > li > a:hover {
  color: #F95700;
}
.menu a[aria-current="page"],
.menu a[aria-current="page"]:hover {
  color:#F95700;
}

I checked the files; jQuery, bootstrap.js and bootstrap.css are all linked properly. Do I have to add some additional jQuery in or am I missing some CSS to get the active to switch like the subnav menu on their site?

score 50 · Answer 1 · edited Sep 10 '13 at 03:18

50

This is what I ended up with since you have to clear the others as well.

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

edited Sep 10 '13 at 03:18

Jeromy French

11,812
19
76
129

answered Feb 21 '12 at 16:54

David

501
3
2

1

would you please post the whole context? which is navbar, which is li? and where is this block of javascript placed? sorry but javascripts are really difficult to understand for me – Zennichimaro Aug 11 '13 at 00:58
If the default navbar sets `Home` to `active`, how would you go about maintaining the new `li` as active when the link is clicked and the new page is being loaded,i.e without `preventDefault()`. – Wold Mar 17 '14 at 01:17
3

@David My issue is this. I see the class `active` being applied to the `li`s after clicked but the link does not change. But, if I remove `e.preventDefault();` when I click it apply the `active` to the `li` but in a second the `active` class move to the default, in this case, the `
Home

Labanino

Oct 03 '15 at 19:18

¡Man!, your are awesome :D – Juan Herrera Feb 09 '16 at 16:44

Nick Beranek · Accepted Answer · 2012-08-22T14:37:34.820

35

In order to switch the class, you need to perform some JavaScript.

In jQuery:

$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

In JavaScript:

var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i += 1) {
  anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}

function clickHandler(anchor) {
  var hasClass = anchor.getAttribute('class');
  if (hasClass !== 'active') {
    anchor.setAttribute('class', 'active');
  }
}

I hope this helps.

edited Aug 22 '12 at 14:37

answered Feb 15 '12 at 21:24

Nick Beranek

2,721
1
19
14

Tried adding in the jquery under the jquery 1.7.1 and bootstrap.js before the closing body tag and it didn't work. I don't know jquery very well, figured I just missed calling something from the bootstrap css or js file. Oh well, thanks for the quick reply. – user1029779 Feb 15 '12 at 21:46
1

You need to make sure that the DOM is ready in order for you to be able to grab the selectors. In jQuery, add `$(document).ready(function() { // add code here } );` – Nick Beranek Feb 15 '12 at 21:57
I modified the jQuery. It turns out `.not()` does NOT return a boolean of `true` or `false`. Now I'm checking if it does not have that class. – Nick Beranek Feb 15 '12 at 22:03
I think I will try to get it working using the scrollspy, but even that is a pain in the ass. Wish the documentation was better. – user1029779 Feb 15 '12 at 22:40
Part of the problem was I was using a cufon font, didn't realize it caused problems with colors. Thanks for the help. – user1029779 Feb 16 '12 at 21:16

score 20 · Answer 3 · answered Jul 17 '12 at 04:52

20

this is my code for handling twitter bootstrap navigation list:

$(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });

answered Jul 17 '12 at 04:52

hbinduni

1,170
17
27

wow this is worked for me when tried with code igniter. u r so awesome :) – Jay Mayu Aug 11 '12 at 15:39
10

e.preventDefault() will prevent the link to open. – armnov Feb 18 '13 at 13:18

score 17 · Answer 4 · answered Nov 02 '12 at 04:06

17

I use 2 1-liners, depending on how my nav is structured

Just make sure that none of your links have active class to start.

actual links

If your nav links are on separate HTML files (like a layout template in express.js that has a menu), you can do this:

$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');

hash links

If they are hashes, do this:

$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });

If you don't want to scroll on hash-click, return false:

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });

answered Nov 02 '12 at 04:06

konsumer

3,411
1
30
31

+1 for solid solutions that work for both styles of navigation! – Chase Florell Sep 22 '13 at 17:50
what happens if the href attribute is pointing to the root href="/" or if more parameters were added to the url along the way ?? it will fail big time ! NEVER trust the user !!! – alex Feb 14 '14 at 13:27
You're not trusting the user. The client-side javascript is parsing links that you put in the HTML. If you want it to work, don't put `/` in front of links or modify my snippets to include `/`. – konsumer Feb 21 '14 at 01:38
Mine is an example, I generally tailor it to the style of links I am using (which I always have control of.) For your example of params being needed, try `$('ul.nav > li > a[href^="' + document.location.pathname + '"]')` as the selector. – konsumer Feb 21 '14 at 01:51
@konsumer : u r awesome! :) – Sumeet Gavhale Mar 13 '15 at 06:56

score 8 · Answer 5 · answered Sep 23 '12 at 04:21

Looking at some of the other answers, if you want the webpage to scroll down to that section when a side menu is clicked then you don't want to preventDefault.

Additionally, you only need to remove the current active class and add a new one not search through all li's. You also want the code to not do anything when the list item you've selected is already active—not needlessly add and remove the same active class. Lastly you should put your event listener on the a element not the li as it has an easier time of triggering a click event on iPhones and tablets, etc. Could also use .delegate so you don't have to wait for a DOM ready event. So in the end I'd do something like this (I assume you've preloaded jQuery):

$('body').delegate('.menu li a', 'click', function(){
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active')){
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});

score 5 · Answer 6 · answered Feb 22 '15 at 20:24

I suggest this code :

 <script>
      var curentFile = window.location.pathname.split("/").pop();
      if (curentFile == "") curentFile = "Default.aspx";
      $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
 </script>

It's work like a charm .

score 3 · Answer 7 · answered Jul 31 '15 at 02:18

Tested and it works fine.

    $('.navbar li').click(function(e) {
        $('.navbar li.active').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }

    });

  <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            . . . 
  </ul>

score 3 · Answer 8 · answered Feb 18 '12 at 04:44

I did something different to solve this (fyi, i'm a complete html/css/js amateur).

Each of my navbar buttons goes to a new page. so, in each page's html, i put something like this at the bottom:

<script type="text/javascript">
    $(document).ready( function(){
       $("#aboutButton").removeClass("active");
    });

    $(document).ready( function(){
       $("#dashboardButton").addClass("active");
    });
</script>

That got it working right away for me.

P.S. I tried the accepted answer but had no luck as it would also need to remove the 'active' class from the currently active button to truly 'switch' over. I'm sure it's possible, but again, I'm pretty new to this stuff.

score 2 · Answer 9 · answered Nov 15 '12 at 13:37

2

anyone having problems with this using jsp, watch your packages.

document.location.pathname gave me: /packagename/index.jsp

but my href in my navbar called just index.jsp

So to edit konsumer's answer:

$(document).ready(function() {
   var string = document.location.pathname.replace('/Package Name/','');
   $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );

answered Nov 15 '12 at 13:37

FredoAF

504
2
8
22

totes. mine is just for top-level links, pulled code from running project. Might be better to do $('ul.nav > li > a[href="' + document.location + '"]').parent().addClass('active'); – konsumer Jan 24 '13 at 14:27

score 1 · Answer 10 · edited May 23 '17 at 12:02

1

I tried some of the top answers above, it works for ".active" class, but the links not working well, it still stays on the current page. Then I tried this:

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

I found it here: Twitter Bootstrap add active class to li

edited May 23 '17 at 12:02

Community

1
1

answered May 09 '14 at 03:27

whyisyoung

316
5
16

Worked fine with links:) Thank You – Rebecca Aug 30 '16 at 16:41

score 1 · Answer 11 · edited Apr 26 '16 at 17:47

<ul class="main-menu">
    <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li>
    <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li>
    <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li>
    <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li>
</ul>

<script>
$(function(){
  $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active');
})
</script>

score 0 · Answer 12 · answered Aug 27 '12 at 07:27

0

Add to your JavaScript:

$(".menu li").click(function(e) {
    $(".menu li").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
});

answered Aug 27 '12 at 07:27

Peter Tseng

13,613
4
67
57

score 0 · Answer 13 · answered Mar 19 '14 at 21:30

This is getting pretty old and clustered with answers, but I took the top answer and made it better. The top answer only works if there's one on the page. This scopes it to removing active from sibling elements and adding it to the one you clicked.

I also added the class nav-toggle so that it doesn't interfere with things that already have bootstrap js attached.

$('.nav.nav-toggle li').click(function(e) {
  var $this = $(this);
  $this.siblings().removeClass('active');
  if (!$this.hasClass('active')) {
      $this.addClass('active');
  }
  e.preventDefault();
});

Bootstrap CSS Active Navigation

13 Answers13

I use 2 1-liners, depending on how my nav is structured

actual links

hash links

Linked

Related