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?
July 21, 2014 at 7:57 am
#176012
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.