How can I highlight the current page in my navbar?

[Robbie Grove]

Hi

I’ve been having issues with the different techniques that I’ve found to target this styling. None of them have worked. This is my current code:

[MOD EDIT – Codedump Removeed]

Can anyone help?

[Paulie_D]

Please make a Codepen.io example rather than leave us with large ‘dump’ of code. It’s much easier to diagnose.

However, your question has many possible answers depending on what you are trying to do, the size of your site etc.

I’m assuming that you mean that each page would have it’s respective link ‘highlighted’ as and when it is loaded…correct?

If so, the easiest, and most dynamic method is to do it with Javascript (or a JS library…it’s a small script)….other than that you can give each page a class (body class="home" for instance) and then just tie it in to the relevant link in your menu with CSS.

[r00t]

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.

[Author]

Posts