How to keep an active link in nav list (twitter bootstrap)?

Question

I would like to show an active link when the link is clicked (and that link stay active while the user is on link1 for example) (I'm using Symfony2 with Twitter bootstrap)

<ul class="nav nav-list">
  <li class="active"> <a href="/link1">Link</a> </li>
  <li class=""> <a href="/link2">Link</a> </li>
  <li class=""> <a href="/link3">Link</a> </li>        
</ul>

EDIT
The template of the menu is imported in each page as a block (I'm using twig), for example for link1.html.twig, I would have :
{% include menu.html.twig %}

code html ...

etc

Any help would be much appreciated.

Do the links go to separate pages? or sections on the same page? — VIDesignz, Nov 05 '12 at 01:33
Yes the links go to separate pages. So the page is refresh for each link. — Reveclair, Nov 05 '12 at 01:34

VIDesignz · Answer 1 · 2012-11-05T04:14:31.910

3

This should work :)

JQuery

var x = $(location).attr('href').replace( 'http://yourdomain.com' , ""); // Step 1
$('a[href="' + x + '"]').addClass('active'); // Step 2

Edit

Explanation

(Step 1) Pretty much you are capturing the full url and page name in the x variable 'http://yourdomain.com/page.html', deleting the domain name 'http://yourdomain.com' leaving you with '/page.html'

(Step 2) Match the link that has the value '/page.html' and add the class 'active' to it

edited Nov 05 '12 at 04:14

answered Nov 05 '12 at 03:26

VIDesignz

4,703
3
25
37

For the demo case provided by @Reveclaire this should work and is a neat solution. However it may be worth explaining it in a little detail. – Sphvn Nov 05 '12 at 04:04
Thanks Lavabeams! I added an explanation, hope this helps! :) – VIDesignz Nov 05 '12 at 04:15
This would work best when you use an include to populate your menus...don't have to mess with the menu on each and every page. – VIDesignz Nov 05 '12 at 04:16
The active class needs to go on the li not the a, so the second line should be something like: $('a[href="' + x + '"]').parent('li').addClass('active'); – someuser Oct 07 '13 at 16:20
It seems dirty to do this in javascript. – Armstrongest Jan 06 '16 at 20:32

score 0 · Answer 2 · answered Nov 05 '12 at 04:00

I am assuming on each page you have your navigation elements. You just need to change which element has the class of "active".

Link1 active as this is Link1.html:

<ul class="nav nav-list">
  <li class="active"> <a href="/link1">Link</a> </li>
  <li class=""> <a href="/link2">Link</a> </li>
  <li class=""> <a href="/link3">Link</a> </li>        
</ul>

Link2 active as this is Link2.html:

<ul class="nav nav-list">
  <li class=""> <a href="/link1">Link</a> </li>
  <li class="active"> <a href="/link2">Link</a> </li>
  <li class=""> <a href="/link3">Link</a> </li>        
</ul>

If you are doing something more complex than just going to the new page please update your question and explain as your question is a tad vague, otherwise the above should work.

@VlDesignz answer is probably suited to you. Just ensure you wrap it in a document ready handler. — Sphvn, Nov 08 '12 at 01:28

score 0 · Answer 3 · answered Jan 06 '16 at 20:44

One POCSS ( Plain Ol' CSS ) way to do this:

In your main.twig file

<body class="{% block body_class 'home' %}">
<!-- stuff here -->
<ul class="nav nav-list">
  <li class="nav-home"> <a href="/">Link</a>Home</li>
  <li class="nav-about"> <a href="/about">About Us</a> </li>
  <li class="nav-contact"> <a href="/contact">Contact Us</a> </li>        
</ul>

In about_page.twig template

{% block body_class 'page-about' %}

In your CSS file

.page-about .nav-about, .page-home .nav-home, .page-contact .nav-contact {
  /* Active styles here */
}

The advantage of doing it this is that you can set other things on your pages as per that body class setting, like:

.page-about a { h1: green; }
.page-home a { h1: blue; }
.page-contact a { h1 : pink; }

How to keep an active link in nav list (twitter bootstrap)?

3 Answers3

Linked