Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How can I highlight the current page in my navbar? Reply To: How can I highlight the current page in my navbar?

#176012
r00t
Participant

There’s no way to do that via CSS. It’s usually a job for your back-end language (i.e. PHP) to detect the current page and add the class you need.

However, I’ve had cases where I need that on a static site so I wrote this jQuery thingy:

$(document).ready(function() {
    setNavigation();
});

function setNavigation() {
    var path = $(location).attr('pathname');
    $("nav#main-nav a").each(function() {
        var href = $(this).attr('href');
        if (path == href) {
            $(this).addClass('active');
        }
    });
}

This is gonna add a class=”active” to links matching your current page’s URL.
You might wanna edit the “nav#main-nav a” part to whatever markup you are using for your menu.