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

Home Forums CSS How to keep the page highlighted on the nav bar

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #245601

    How do you make the page I am on stay highlighted while I am on that page? Right now I have figured how to make it change color by hovering over it but I cant figure out how to make it stay a certain color when I am not hovering over it.
    This is the code I am using so far


    div> <nav> <ul class="nav"> <li><a href="home2.html">HOME</a></li>

    CSS –

     .active { background-color: red; }

    Generally, you need javascript to compare the current page url to those in your nav and apply the .active class.

    On very small sites you can apply classes to the body to effect this but JS is the usual method.


    I am not very familiar with javascript. Can you push me in the right direction on how to do this with javascript?


    Googling something like “highlight current page in menu with javascript” will lead you to various solutions.

    But, as luck would have it, I wrote a quick script function for a recent project;

    function navHighlight(elem, home, active) {
        var url = location.href.split('/'),
            loc = url[url.length -1],
            link = document.querySelectorAll(elem);
        for (var i = 0; i < link.length; i++) {
            var path = link[i].href.split('/'),
                page = path[path.length -1];
            if (page == loc || page == home && loc == '') {
                link[i].parentNode.className += ' ' + active;
                document.body.className += ' ' + page.substr(0, page.lastIndexOf('.'));
    navHighlight('.menu a', 'index.php', 'current'); /* menu link selector, home page, highlight class */

    This does as Paulie described – it compares the page file name from the URL to any hrefs in the menu, and if they match, it adds a class to the anchor’s parent li.

    Additionally, it adds the page name as a class to the body tag.

    So, using the example above, if you were viewing the “about-us.php” page in a web browser, the menu li for “About Us” gets a “.current” class, and the body element get a “.about-us” class;

    <body class="about-us">
    <ul class="menu">
        <li><a href="/index.php">Home</a></li>
        <li class="current"><a href="/about-us.php">About Us</a></li>
        <li><a href="/contact-us.php">Contact Us</a></li>

    Note that the navHighlight() function takes 3 parameters;
    – the CSS selector to the a elements in the menu
    – the file name of the home page
    – the class you want to give current/active menu items

    Pop it above the closing </body> tag.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.